Javascript / Jquery：根据Radio框选择显示隐藏的div

我正在做的是建立一个表单，当你选择一个答案时，会弹出一堆新问题。

这是我的工作代码：

$(".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]+'"') 

Answer 1

查看问题中突出显示的语法。 在

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

Answer 2

试试这个：

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

希望能帮助到你！

Answer 3

 if($(this).val()==='"+radioBoxArray[j]+"') is not correct 

尝试

 if($(this).val()=== radioBoxArray[j]) 

要么

 if($(this).val()=== String( radioBoxArray[j] )) 

希望有所帮助

Answer 4

将其更改为：

if($(this).val()==='"'+radioBoxArray[j]+'"')