jquery - JQuery スクリプトの最小化

Question

私はいくつかの調査ページを作成しています。また、調査員が質問に答えるときに、いくつかのオプションと制限を使用して画面を制御する必要があります。そのため、私は現在jQueryを使用していますが、非常に手作業であり、重複する関数などが非常に多いため、コードがばかげているように見えます.

以下はスクリプトです

$( document ).ready(function() {


// Block text input at the very first
 $("#q1_1_etc, #q1_2_etc, #q1_3_etc, #q1_4_etc,#q1_5_etc, #q1_6_etc, #q2_1_etc, #q2_2_etc, #q2_3_etc, #q3_1_etc, #q3_2_etc, #q3_3_etc, #q4_1_etc, #q4_2_etc, #q4_3_etc, #q4_4_etc, #q5_1_etc ,#q5_5_etc").attr("disabled","disabled" );

//Block/Unblock input type on checkbox
 $("#q1_1_5").change(function(){
    if($(this).is(":checked")==true){
        $("#q1_1_etc").removeAttr("disabled");
    }else{
        $("#q1_1_etc").val(" ");
        $("#q1_1_etc").attr("disabled","disabled" );
    }

 });

  $("#q1_4_4").change(function(){
    if($(this).is(":checked")==true){
        $("#q1_4_etc").removeAttr("disabled");
    }else{
        $("#q1_4_etc").val(" ");
        $("#q1_4_etc").attr("disabled","disabled" );
    }

 });

 //Block/Unblock input type on radio
 $("input[name='q1_2']").change(function(){
    if($("#q1_2_3").is(":checked")==true){
        $("#q1_2_etc").removeAttr("disabled");
    }else{
        $("#q1_2_etc").val(" ");
        $("#q1_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q1_3']").change(function(){
    if($("#q1_3_3").is(":checked")==true){
        $("#q1_3_etc").removeAttr("disabled");
    }else{
        $("#q1_3_etc").val(" ");
        $("#q1_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q1_5']").change(function(){
    if($("#q1_5_3").is(":checked")==true){
        $("#q1_5_etc").removeAttr("disabled");
    }else{
        $("#q1_5_etc").val(" ");
        $("#q1_5_etc").attr("disabled","disabled" );
    }

 });

  $("input[name='q1_6']").change(function(){
    if($("#q1_6_3").is(":checked")==true){
        $("#q1_6_etc").removeAttr("disabled");
    }else{
        $("#q1_6_etc").val(" ");
        $("#q1_6_etc").attr("disabled","disabled" );
    }

 });

  $("input[name='q2_1']").change(function(){
    if($("#q2_1_3").is(":checked")==true){
        $("#q2_1_etc").removeAttr("disabled");
    }else{
        $("#q2_1_etc").val(" ");
        $("#q2_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q2_2']").change(function(){
    if($("#q2_2_3").is(":checked")==true){
        $("#q2_2_etc").removeAttr("disabled");
    }else{
        $("#q2_2_etc").val(" ");
        $("#q2_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q2_3']").change(function(){
    if($("#q2_3_3").is(":checked")==true){
        $("#q2_3_etc").removeAttr("disabled");
    }else{
        $("#q2_3_etc").val(" ");
        $("#q2_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q3_1']").change(function(){
    if($("#q3_1_3").is(":checked")==true){
        $("#q3_1_etc").removeAttr("disabled");
    }else{
        $("#q3_1_etc").val(" ");
        $("#q3_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q3_2']").change(function(){
    if($("#q3_2_3").is(":checked")==true){
        $("#q3_2_etc").removeAttr("disabled");
    }else{
        $("#q3_2_etc").val(" ");
        $("#q3_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q3_3']").change(function(){
    if($("#q3_3_4").is(":checked")==true){
        $("#q3_3_etc").removeAttr("disabled");
    }else{
        $("#q3_3_etc").val(" ");
        $("#q3_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_1']").change(function(){
    if($("#q4_1_3").is(":checked")==true){
        $("#q4_1_etc").removeAttr("disabled");
    }else{
        $("#q4_1_etc").val(" ");
        $("#q4_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_2']").change(function(){
    if($("#q4_2_3").is(":checked")==true){
        $("#q4_2_etc").removeAttr("disabled");
    }else{
        $("#q4_2_etc").val(" ");
        $("#q4_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_3']").change(function(){
    if($("#q4_3_3").is(":checked")==true){
        $("#q4_3_etc").removeAttr("disabled");
    }else{
        $("#q4_3_etc").val(" ");
        $("#q4_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_4']").change(function(){
    if($("#q4_4_3").is(":checked")==true){
        $("#q4_4_etc").removeAttr("disabled");
    }else{
        $("#q4_4_etc").val(" ");
        $("#q4_4_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q5_1']").change(function(){
    if($("#q5_1_7").is(":checked")==true){
        $("#q5_1_etc").removeAttr("disabled");
    }else{
        $("#q5_1_etc").val(" ");
        $("#q5_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q5_5']").change(function(){
    if($("#q5_5_11").is(":checked")==true){
        $("#q5_5_etc").removeAttr("disabled");
    }else{
        $("#q5_5_etc").val(" ");
        $("#q5_5_etc").attr("disabled","disabled" );
    }

 });



});

関数 onSubmit(){

var aq1_1=$("input[name^='q1_1']:checked").val();
if(aq1_1 == undefined){
    alert("1-1 Please, Answer the question!");  
    $("#viewpoint1_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_1_5").is(":checked");
var isEtcEmpty=$("#q1_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-1 Please, Answer the question!.");
    $("#q1_1_etc").focus();
    return;
}


var aq1_2=$("input[name^='q1_2']:checked").val();
if(aq1_2 == undefined){
    alert("1-2 Please, Answer the question!");  
    $("#viewpoint1_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_2_3").is(":checked");
var isEtcEmpty=$("#q1_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-2 Please, Answer the question!.");
    $("#q1_2_etc").focus();
    return;
}

var aq1_3=$("input[name^='q1_3']:checked").val();
if(aq1_3 == undefined){
    alert("1-3 Please, Answer the question!");  
    $("#viewpoint1_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_3_3").is(":checked");
var isEtcEmpty=$("#q1_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-3 Please, Answer the question!.");
    $("#q1_3_etc").focus();
    return;
}

var aq1_4=$("input[name^='q1_4']:checked").val();
if(aq1_4 == undefined){
    alert("1-4 Please, Answer the question!");  
    $("#viewpoint1_4").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_4_4").is(":checked");
var isEtcEmpty=$("#q1_4_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-4 Please, Answer the question!.");
    $("#q1_4_etc").focus();
    return;
}

var aq1_5=$("input[name^='q1_5']:checked").val();
if(aq1_5 == undefined){
    alert("1-5 Please, Answer the question!");  
    $("#viewpoint1_5").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_5_3").is(":checked");
var isEtcEmpty=$("#q1_5_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-5 Please, Answer the question!.");
    $("#q1_5_etc").focus();
    return;
}

var aq1_6=$("input[name^='q1_6']:checked").val();
if(aq1_6 == undefined){
    alert("1-6 Please, Answer the question!");  
    $("#viewpoint1_6").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_6_3").is(":checked");
var isEtcEmpty=$("#q1_6_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-6 Please, Answer the question!.");
    $("#q1_6_etc").focus();
    return;
}

var aq2_1=$("input[name^='q2_1']:checked").val();
if(aq2_1 == undefined){
    alert("2-1 Please, Answer the question!");  
    $("#viewpoint2_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q2_1_3").is(":checked");
var isEtcEmpty=$("#q2_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("2-1 Please, Answer the question!.");
    $("#q2_1_etc").focus();
    return;
}

var aq2_2=$("input[name^='q2_2']:checked").val();
if(aq2_2 == undefined){-
    alert("2-2 Please, Answer the question!");  
    $("#viewpoint2_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q2_2_3").is(":checked");
var isEtcEmpty=$("#q2_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("2-2 Please, Answer the question!.");
    $("#q2_2_etc").focus();
    return;
}


var aq2_3=$("input[name^='q2_3']:checked").val();
if(aq2_3 == undefined){
    alert("2-3 Please, Answer the question!");  
    $("#viewpoint2_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q2_3_3").is(":checked");
var isEtcEmpty=$("#q2_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("2-3 Please, Answer the question!.");
    $("#q2_3_etc").focus();
    return;
}


var aq3_1=$("input[name^='q3_1']:checked").val();
if(aq3_1 == undefined){
    alert("3-1 Please, Answer the question!");  
    $("#viewpoint3_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q3_1_3").is(":checked");
var isEtcEmpty=$("#q3_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("3-1 Please, Answer the question!.");
    $("#q3_1_etc").focus();
    return;
}


var aq3_2=$("input[name^='q3_2']:checked").val();
if(aq3_2 == undefined){
    alert("3-2 Please, Answer the question!");  
    $("#viewpoint3_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q3_2_3").is(":checked");
var isEtcEmpty=$("#q3_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("3-2 Please, Answer the question!.");
    $("#q3_2_etc").focus();
    return;
}

var aq3_3=$("input[name^='q3_3']:checked").val();
if(aq3_3 == undefined){
    alert("3-3 Please, Answer the question!");  
    $("#viewpoint3_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q3_3_3").is(":checked");
var isEtcEmpty=$("#q3_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("3-3 Please, Answer the question!.");
    $("#q3_3_etc").focus();
    return;
}

var aq4_1=$("input[name^='q4_1']:checked").val();
if(aq4_1 == undefined){
    alert("4-1 Please, Answer the question!");  
    $("#viewpoint4_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_1_3").is(":checked");
var isEtcEmpty=$("#q4_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-1 Please, Answer the question!.");
    $("#q4_1_etc").focus();
    return;
}

var aq4_2=$("input[name^='q4_2']:checked").val();
if(aq4_2 == undefined){
    alert("4-2 Please, Answer the question!");  
    $("#viewpoint4_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_2_3").is(":checked");
var isEtcEmpty=$("#q4_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-2 Please, Answer the question!.");
    $("#q4_2_etc").focus();
    return;
}

var aq4_3=$("input[name^='q4_3']:checked").val();
if(aq4_3 == undefined){
    alert("4-3 Please, Answer the question!");  
    $("#viewpoint4_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_3_3").is(":checked");
var isEtcEmpty=$("#q4_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-3 Please, Answer the question!.");
    $("#q4_3_etc").focus();
    return;
}

var aq4_4=$("input[name^='q4_4']:checked").val();
if(aq4_4 == undefined){
    alert("4-4 Please, Answer the question!");  
    $("#viewpoint4_4").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_4_3").is(":checked");
var isEtcEmpty=$("#q4_4_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-4 Please, Answer the question!.");
    $("#q4_4_etc").focus();
    return;
}



var aq5_1=$("input[name^='q5_1']:checked").val();
if(aq5_1 == undefined){
    alert("5-1 Please, Answer the question!");  
    $("#viewpoint5_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q5_1_7").is(":checked");
var isEtcEmpty=$("#q5_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("5-1 Please, Answer the question!.");
    $("#q5_1_etc").focus();
    return;
}

var aq5_2=$("input[name^='q5_2']:checked").val();
if(aq5_2 == undefined){
    alert("5-2 Please, Answer the question!");  
    $("#viewpoint5_2").get(0).scrollIntoView(true);
    return;
}

var aq5_3=$("input[name^='q5_3']:checked").val();
if(aq5_3 == undefined){
    alert("5-3 Please, Answer the question!");  
    $("#viewpoint5_3").get(0).scrollIntoView(true);
    return;
}

var aq5_4=$("input[name^='q5_4']:checked").val();
if(aq5_4 == undefined){
    alert("5-4 Please, Answer the question!");  
    $("#viewpoint5_4").get(0).scrollIntoView(true);
    return;
}

var aq5_5=$("input[name^='q5_5']:checked").val();
if(aq5_5 == undefined){
    alert("5-5 Please, Answer the question!");  
    $("#viewpoint5_5").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q5_5_11").is(":checked");
var isEtcEmpty=$("#q5_5_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("5-5 Please, Answer the question!.");2014-04-23
    $("#q5_5_etc").focus();
    return;
}


if($("#companyName").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#writer").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#phoneFax").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#contactemail").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#location").val().length ==0){
    alert("Please Answer the Question");
    return;
}


form.action = "customs_save.jsp";
form.submit();

}

ご覧のとおり、重複が山ほどあります。もう一度言いますと、より効率的な方法に変更したいと思います。

あなたがそれについて知っているなら、私にあなたの経験を教えてください、そして私にとって役立つアドバイスをしてください.

ありがとうございました。

score 1 · Accepted Answer

交換

$("#q1_1_etc, #q1_2_etc, #q1_3_etc, #q1_4_etc,#q1_5_etc, #q1_6_etc, #q2_1_etc, #q2_2_etc, #q2_3_etc, #q3_1_etc, #q3_2_etc, #q3_3_etc, #q4_1_etc, #q4_2_etc, #q4_3_etc, #q4_4_etc, #q5_1_etc ,#q5_5_etc").attr("disabled","disabled" );

に

// If you want to disabled all input fields
$(":input").attr("disabled", "disabled");

// If you want to disable only a subset. Add them to a container like a div
$("#myInputContainer :input").attr("disabled", "disabled");

次のように置き換えて、入力フィールドに汎用イベントハンドラーを使用します。

$("#q1_1_5").change(function(){
  if($(this).is(":checked")==true){
      $("#q1_1_etc").removeAttr("disabled");
  }else{
      $("#q1_1_etc").val(" ");
      $("#q1_1_etc").attr("disabled","disabled" );
  }
});


$("#q1_4_4").change(function(){
  if($(this).is(":checked")==true){
    $("#q1_4_etc").removeAttr("disabled");
  }else{
    $("#q1_4_etc").val(" ");
    $("#q1_4_etc").attr("disabled","disabled" );
  }

});

に

$("input").change(function(){
  var relatedElementId = "#" + $(this).attr("id") + "_etc";
  if($(this).is(":checked")==true){
      $(relatedElementId).removeAttr("disabled");
  }else{
      $(relatedElementId).val(" ");
      $(relatedElementId).attr("disabled","disabled" );
  }

});

主なアイデアは、jQuery セレクターを使用して DOM 構造を編成し、汎用コードを簡単に記述できるようにすることです。

score 0 · Accepted Answer

index ->.eq(i) を使用

入力時に共通クラスを使用

$(document).ready(function(){

$('.common_class_input').each(function(i){

    //use index! ->.eq(i)

    //use common class at input

    if($(this).is(":checked")==true)

    {

               $('.common_class_input').eq(i)//Do something

    }else{

               $('.common_class_input').eq(i)//Do something

            }

})

});

jquery - JQuery スクリプトの最小化

2 に答える 2

Related

Reference