Question

我正在制作一个由单选按钮组成的表单，我隐藏了根据选中的单选按钮显示的详细信息，这是我的代码

$(function() {
    $("#silver").hide();
    $("#silver2").hide();
    $("#silver3").hide();
    $("#silver4").hide();
    $("#gold").hide();
    $("#gold2").hide();
    $("#gold3").hide();
    $("#platinum").hide();
    $("#platinum2").hide();

    $("input[name='period']").change(function(){
        if ($("input[name='period']:checked").val() == '1'){
            $("#silver").fadeIn("fast");
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '2'){
            $("#silver2").fadeIn("fast");
            $("#silver").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '3'){
            $("#silver3").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '4'){
            $("#silver4").fadeIn("fast");
            $("#gold").hide();
            $("#platinum").hide();
        }else if($("input[name='period']:checked").val() == '5'){
            $("#gold").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '6'){
            $("#gold2").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold3").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '7'){
            $("#gold3").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold2").hide();
            $("#gold").hide();
            $("#platinum").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '8'){
            $("#platinum").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum2").hide();
        }else if($("input[name='period']:checked").val() == '9'){
            $("#platinum2").fadeIn("fast");
            $("#silver").hide();
            $("#silver2").hide();
            $("#silver3").hide();
            $("#silver4").hide();
            $("#gold").hide();
            $("#gold2").hide();
            $("#gold3").hide();
            $("#platinum").hide();
        }   
    });
});

我认为这太可怕了，我怎么能简化这个呢？请帮我谢谢

此致

Answer 1

对所有这些元素应用一个类：银，银2，银3，银4，金，金2，金3，铂，铂2。假设它将是class="switchable"
在上面方法的开头不要隐藏每个元素，但要做到简单：
```
$(".switchable").hide();
```

然后根据您的radiobuttons中的值为每个元素应用一些不同的属性。那将是：

<xx id="#silver" data-rel="1"></xx>
...
<xx id="#silver2" data-rel="2"></xx>
...
<xx id="#period" data-rel="3"></xx>
...
// etc..

然后你的change（）处理程序应如下所示：

$("input[name='period']").change(function() {
  var rel = $("input[name='period']:checked").val();
  $(".switchable").hide();
  $(".switchable[data-rel='" + rel + "']").fadeIn("fast");
});

希望你有我的想法

Answer 2

您可以尝试在自己的函数中封装以下行。例如：

function do() {
  $("#silver").fadeIn("fast");
  $("#silver2").hide();
  $("#silver3").hide();
  $("#silver4").hide();
  $("#gold").hide();
  $("#gold2").hide();
  $("#gold3").hide();
  $("#platinum").hide();
  $("#platinum2").hide();
}

然后在if-else条件中，您可以执行以下操作：

$("input[name='period']").change(function(){
    if ($("input[name='period']:checked").val() == '1'){
        do();
    }else if($("input[name='period']:checked").val() == '2'){
        doAnother();
    }else if($("input[name='period']:checked").val() == '3'){
        doAnotherAnother();
    }
   ...
}

至少这会使你的代码可读。

Answer 3

那么，你能为你的银牌，金牌等添加class="metal"吗？然后你可以这样做：

$(function() {
    $('.metal').hide();

    $("input[name='period']").change(function(){
        switch ($("input[name='period']:checked").val()){
            case '1':
                $("#silver").fadeIn("fast");
                $(".metal:not(#silver)").hide();
            break;
            case '2':
                $("#silver2").fadeIn("fast");
                $(".metal:not(#silver2)").hide();
            break;
            (etc)
        }   
    });
});

或者，你可以把它放在开头：

var $metals = $('#silver, #silver2 (etc)');

然后使用：

$metals.not($('#silver').show()).hide();

Answer 4

为什么不使用某些金属类，然后：

function reset() {
    $(".metals").hide();
}

var gElems = [ "silver", "silver2", "silver3", "silver4", "gold", 
               "gold2", "gold3", "platinum", "platinum2" ]; 

$(function() {
    reset();

    $("input[name='period']").change(function(){
        var val = $("input[name='period']:checked").val();
        reset();

        if (val > 0 && val < gElem.length - 1) {
            $("#" + gElem[val + 1]).fadeIn("fast");
        }
    });
});

（未经测试）

帮我简化这个jquery代码

4 个答案: