最小化JQuery脚本

时间:2014-04-24 01:42:38

标签: jquery minimization

我正在制作一些调查页面。当测量员回答问题时,我需要通过一些选项和限制来控制屏幕。因为我现在正在使用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" );
    }

 });



});

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

}

你可以看到有很多重复。如果我再说一次,我想改变它的效率。

如果您了解它,请告诉我您的经验并提出对我有帮助的建议。

谢谢。

2 个答案:

答案 0 :(得分: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" );
    
  2. 通过

    // 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" );
        }
      
      });
      
    2. 通过

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

答案 1 :(得分:0)

使用index - > .eq(i)

在输入处使用公共类

(文档)$。就绪(函数(){

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

            }

})

});