[英]Javascript/Jquery: Show a hidden div based on a Radio box select
What I'm doing is building a form, where when you select one answer a bunch of new questions pop up. 我正在做的是建立一个表格,当您选择一个答案时,会弹出一堆新问题。
This is my working code: 这是我的工作代码:
$(".appliedWorked").click(function(){
if($(this).val()==="appliedWorkedYes")
$(".appliedWorkedYesHide").show("fast");
else
$(".appliedWorkedYesHide").hide("fast");
});
It works for only 1 class. 它仅适用于1个班级。 I want to do this for many classes, so I thought I'd stick it into an array.
我想对许多类都这样做,所以我想将其粘贴到一个数组中。
Here's my code for many classes but it's not showing when I hit yes on a radio box: 这是我许多课程的代码,但是当我在单选框上单击“是”时,它不会显示:
// 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");
});
}
I think the issue is: 我认为问题是:
if($(this).val()==='"+radioBoxArray[j]+"')
Please help! 请帮忙!
I've tried the following but will not show when I click on a box: 我尝试了以下操作,但单击框后将不会显示:
if($(this).val()=== radioBoxArray[j])
if($(this).val()=== String( radioBoxArray[j] ))
if($(this).val()==='"'+radioBoxArray[j]+'"')
Look at the syntax highlighting in your question. 查看问题中突出显示的语法。 In
在
if($(this).val()==='"+radioBoxArray[j]+"')
the right-hand side of that test is just the string '"+radioBoxArray[j]+"'
. 该测试的右侧只是字符串
'"+radioBoxArray[j]+"'
。 Remove all those quotes. 删除所有这些引号。
if($(this).val() === radioBoxArray[j])
Other cleanup: 其他清理:
Declare the array using array literal notation: 使用数组文字符号声明数组:
var radioBoxArray = [ "appliedWorkedYes", "workStudyYes", "workHistoryYes", "workWeekEndsYes", "cprYes", "aedYes", "aidYes", "wsiYes", "gaurdYes"];
Save the radioBoxArray.length
value in a local variable, otherwise it will be recomputed at every iteration. 将
radioBoxArray.length
值保存在局部变量中,否则它将在每次迭代时重新计算。 Also save the radioBoxArray[j]
in a local variable (this also more efficient). 还要将
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"); }); }
Instead of using separate show()
and hide()
calls, use .toggle(showOrHide)
不要使用单独的
show()
和hide()
调用,而应使用.toggle(showOrHide)
Final code can be cleaned up like so: 最终代码可以像这样清理:
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);
});
}
Alternatively, you could use $.each()
: 或者,您可以使用
$.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);
});
});
Try this: 尝试这个:
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");
});
});
Hope it helps! 希望能帮助到你!
if($(this).val()==='"+radioBoxArray[j]+"') is not correct
Try 尝试
if($(this).val()=== radioBoxArray[j])
or 要么
if($(this).val()=== String( radioBoxArray[j] ))
Hope that helps 希望能有所帮助
更改为:
if($(this).val()==='"'+radioBoxArray[j]+'"')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.