jquery - 需要 jQuery 显示/隐藏逻辑

Question

我有 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();
    }
});

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

提前致谢。

Answer 1

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

Answer 2

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

Answer 3

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

等等等等

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

Answer 4

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