Javascript/Jquery:根据单选框选择显示隐藏的div [英] 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.

这是我的工作代码:

$(".appliedWorked").click(function(){
   if($(this).val()==="appliedWorkedYes") 
      $(".appliedWorkedYesHide").show("fast"); 
   else 
      $(".appliedWorkedYesHide").hide("fast");
});

它仅适用于1个班级.我想对许多类都这样做，所以我想将其粘贴到一个数组中.

It works for only 1 class. 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");

    });

}

我认为问题是:

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

请帮助！

我尝试了以下操作，但是当我单击一个框时不会显示:

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

该测试的右侧只是字符串'"+radioBoxArray[j]+"'.删除所有引号.

the right-hand side of that test is just the string '"+radioBoxArray[j]+"'. Remove all those quotes.

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

其他清理:

• 使用数组文字符号声明数组:

• Declare the array using array literal notation:

var radioBoxArray = [
"appliedWorkedYes",
"workStudyYes",
"workHistoryYes",
"workWeekEndsYes",
"cprYes",
"aedYes",
"aidYes",
"wsiYes",
"gaurdYes"];

将radioBoxArray.length值保存在局部变量中，否则它将在每次迭代时重新计算.还要将radioBoxArray[j]保存在本地变量中(这也更有效).

Save the radioBoxArray.length value in a local variable, otherwise it will be recomputed at every iteration. Also save the radioBoxArray[j] in a local variable (this also more efficient).

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)

Instead of using separate show() and hide() calls, use .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);
    });
}

或者，您可以使用 $.each() :

Alternatively, you could use $.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:根据单选框选择显示隐藏的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！