Javascript / Jquery:根据单选框选择显示隐藏的div

时间:2011-04-04 16:40:32

标签: javascript jquery

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

这是我的工作代码:

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

4 个答案:

答案 0 :(得分:2)

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

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");
        });
    }
    
  • 使用.toggle(showOrHide)

  • ,而不是使用单独的show()hide()来电。

最终代码可以像这样清理:

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

答案 1 :(得分:1)

试试这个:

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

希望它有所帮助!

答案 2 :(得分:0)

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

尝试

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

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

希望有所帮助

答案 3 :(得分:0)

将其更改为:

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