Réduire le script JQuery

Question

Je crée des pages de sondage. Et j'ai besoin de contrôler l'écran avec quelques options et restrictions quand l'enquêteur répond aux questions. pour cela j'utilise actuellement jQuery et ce sont des travaux très manuels et les codes semblent stupides à cause du grand nombre de fonctions dupliquées et ainsi de suite. Alors pourriez-vous me donner quelques conseils sur la façon de minimiser le script jquery que j'avais écrit.

belows sont des scripts

$(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() Fonction

{

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

}

comme vous pouvez le voir, il y a des tas de duplications. et si je dis une fois de plus je veux le changer pour le rendre plus efficace. Si vous êtes au courant s'il vous plaît dites-moi votre expérience et donnez un conseil qui sera utile pour moi.

merci.

Answer 1

1. Remplacer

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

par

// 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. Utilisez des gestionnaires d'événements générique pour vos champs d'entrée en remplacement des choses comme ceci:

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

par

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

}); 

L'idée principale est d'utiliser des sélecteurs jQuery et organiser votre DOM struture pour rendre le code générique facile à écrire. .

Answer 2

Utilisez index -> eq (i)

Utilisez classe commune à l'entrée

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

      } 

}) 

});