![](/img/trans.png)
[英]Javascript/Jquery: Show a hidden div based on a Radio/Option box select
[英]Javascript/Jquery: Show a hidden div based on a Radio box select
我正在做的是建立一个表格,当您选择一个答案时,会弹出一堆新问题。
这是我的工作代码:
$(".appliedWorked").click(function(){
if($(this).val()==="appliedWorkedYes")
$(".appliedWorkedYesHide").show("fast");
else
$(".appliedWorkedYesHide").hide("fast");
});
它仅适用于1个班级。 我想对许多类都这样做,所以我想将其粘贴到一个数组中。
这是我许多课程的代码,但是当我在单选框上单击“是”时,它不会显示:
// 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);
});
});
尝试这个:
var radioBoxArray = [
"appliedWorked",
"workStudy",
"workHistory",
"workWeekEnds",
"cpr",
"aed",
"aid",
"wsi",
"gaurd"
];
$.map(radioBoxArray, function(cls) {
$('.' + cls).click(function() {
// value box
if($(this).val()===cls + 'Yes')
// show method
$("."+cls+"YesHide").show("fast");
// hide else
else $("."+cls+"YesHide").hide("fast");
});
});
希望能帮助到你!
if($(this).val()==='"+radioBoxArray[j]+"') is not correct
尝试
if($(this).val()=== radioBoxArray[j])
要么
if($(this).val()=== String( radioBoxArray[j] ))
希望能有所帮助
更改为:
if($(this).val()==='"'+radioBoxArray[j]+'"')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.