0

我正在制作一些调查页面。当调查员回答问题时，我需要通过一些选项和限制来控制屏幕。因为我目前正在使用 jQuery，这是非常手动的工作，代码看起来很愚蠢，因为有很多重复的函数等等。所以你能给我一些关于如何最小化我编写的 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" );
    }

 });



});

函数提交（）{

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();

}

如您所见，有大量重复。如果我再说一次，我想把它改成更有效的方式。

如果你知道的话，请告诉我你的经历，并给出对我有帮助的建议。

谢谢你。

4

2 回答 2

1

  1. 代替

    $("#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");

  1. 为您的输入字段使用通用事件处理程序替换如下内容：

    $("#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 结构以使通用代码易于编写。

于 2014-04-24T01:58:00.750 回答
0

使用索引 ->.eq(i)

在输入处使用公共类

$(文档).ready(函数(){

$('.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

            }

})

});

于 2014-04-24T02:00:22.820 回答