需要jQuery show / hide逻辑

时间:2012-06-07 13:04:15

标签: jquery

我有4个optgroup选择菜单,它们取决于第一个选择选项的值。我想要做的是获取相关匹配选择组中的值并加载。但显然如果已经选择了一个组,则隐藏该组并将新的选择组放在其位置。

我的jQuery代码是:

$('#subcategory1, #subcategory2, #subcategory3, #subcategory4').hide();

// Hide Orientation Dropdown

$('#orientation').hide();

$('#category').change(function()
{
    $('#orientation').show();

    var CatValue = $("#category").val();

    if (CatValue == '1')
    {
        $("#subcategory1").show();
    }
    if (CatValue == '2')
    {
        $("#subcategory2").show();
    }
    if (CatValue == '3')
    {
        $("#subcategory3").show();
    }
    if(CatValue == '4')
    {
        $("#subcategory4").show();
    }
});

我正在寻找一种更合乎逻辑的方式来写出来。即隐藏先前的子类别选择等。

提前致谢。

4 个答案:

答案 0 :(得分:2)

var num; 
if (CatValue == '1')
{
    num = 1;     

}
if (CatValue == '2')
{
     num = 2;     
}
if (CatValue == '3')
{
     num = 3;     
}
if(CatValue == '4')
{
     num = 4;             
}
$("#subcategory"+num).show();

答案 1 :(得分:2)

$('#subcategory1, #subcategory2, #subcategory3, #subcategory4').hide().filter('#subcategory'+CatValue).show();

答案 2 :(得分:1)

    switch(CatValue)
    {
        case "1": $("#subcategory1").show();
        break;
        case "2": $("#subcategory2").show(); 
        break;
    }

等等

switch基本上允许你在几行代码中使用大量的if语句:)

答案 3 :(得分:1)

var i=1;
while($("#subcategory"+i).length > 0) { // hide others
    $("#subcategory"+i).hide();
    i++;
}
$("#subcategory"+$("#category").val()).show(); // show current