我正在制作一些调查页面。当测量员回答问题时,我需要通过一些选项和限制来控制屏幕。因为我现在正在使用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();
}
你可以看到有很多重复。如果我再说一次,我想改变它的效率。
如果您了解它,请告诉我您的经验并提出对我有帮助的建议。
谢谢。答案 0 :(得分: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");
将输入字段的通用事件处理程序替换为以下内容:
$("#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结构以使通用代码易于编写。
答案 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
}
})
});