我正在做的是构建一个表单,当您选择一个答案时,会弹出一堆新问题。
这是我的工作代码:
$(".appliedWorked").click(function(){
if($(this).val()==="appliedWorkedYes")
$(".appliedWorkedYesHide").show("fast");
else
$(".appliedWorkedYesHide").hide("fast");
});
它仅适用于 1 类。我想对许多类(class)执行此操作,所以我想将其放入数组中。
这是我的许多类的代码,但当我在单选框中单击"is"时,它没有显示:
// storing an array of radio boxe class names
var radioBoxArray = new Array(
"appliedWorkedYes",
"workStudyYes",
"workHistoryYes",
"workWeekEndsYes",
"cprYes",
"aedYes",
"aidYes",
"wsiYes",
"gaurdYes"
);
// looping over the radio box array, too use the show feature of jquery
for(var j = 0; j < radioBoxArray.length; j++){
// class name
$("."+radioBoxArray[j]).click(function(){
// value box
if($(this).val()==='"+radioBoxArray[j]+"')
// show method
$("."+radioBoxArray[j]+"Hide").show("fast");
// hide else
else $("."+radioBoxArray[j]+"Hide").hide("fast");
});
}
我认为问题是:
if($(this).val()==='"+radioBoxArray[j]+"')
请帮忙!
我已尝试以下操作,但当我单击某个框时不会显示:
if($(this).val()=== radioBoxArray[j])
if($(this).val()=== String( radioBoxArray[j] ))
if($(this).val()==='"'+radioBoxArray[j]+'"')
最佳答案
查看您问题中的语法突出显示。在
if($(this).val()==='"+radioBoxArray[j]+"')
该测试的右侧只是字符串'"+radioBoxArray[j]+"'
。删除所有这些引号。
if($(this).val() === radioBoxArray[j])
其他清理:
使用数组文字表示法声明数组:
var radioBoxArray = [ "appliedWorkedYes", "workStudyYes", "workHistoryYes", "workWeekEndsYes", "cprYes", "aedYes", "aidYes", "wsiYes", "gaurdYes"];
将
radioBoxArray.length
值保存在局部变量中,否则它将在每次迭代时重新计算。还将radioBoxArray[j]
保存在局部变量中(这也更有效)。var len = radioBoxArray.length, radio; for(var j = 0; j < len; j++){ radio = radioBoxArray[j]; // class name $("."+radio).click(function(){ if($(this).val() === radio) $("."+radio+"Hide").show("fast"); else $("."+radio+"Hide").hide("fast"); }); }
不要使用单独的
show()
和hide()
调用,而是使用.toggle(showOrHide)
最终代码可以像这样清理:
var radioBoxArray = [
"appliedWorkedYes",
"workStudyYes",
"workHistoryYes",
"workWeekEndsYes",
"cprYes",
"aedYes",
"aidYes",
"wsiYes",
"gaurdYes"
],
len = radioBoxArray.length,
radio;
for (var j = 0; j < len; j++) {
radio = radioBoxArray[j];
// class name
$("." + radio).click(function() {
$("." + radio + "Hide").toggle($(this).val() === radio);
});
}
或者,您可以使用 $.each()
:
var radioBoxArray = [
"appliedWorkedYes",
"workStudyYes",
"workHistoryYes",
"workWeekEndsYes",
"cprYes",
"aedYes",
"aidYes",
"wsiYes",
"gaurdYes"
];
$.each(radioBoxArray, function(i, v) {
$("." + v).click(function() {
$("." + v+ "Hide").toggle($(this).val() === v);
});
});
关于JavaScript/Jquery : Show a hidden div based on a Radio box select,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5541576/