Javascript 帮助我简化这个jquery代码

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

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

我觉得这很可怕，我怎么能简化呢？请帮帮我 多谢各位

问候

对所有这些元素应用一个类：银、银2、银3、银4、金、金2、金3、铂、铂2。假设它将是

class=“可切换的”

在上述方法的开头，不要隐藏每个元素，但要执行以下简单操作：

$(".switchable").hide();

然后根据单选按钮中的值对每个元素应用一些不同的属性。这将是：

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

希望你明白我的意思

对所有这些元素应用一个类：银、银2、银3、银4、金、金2、金3、铂、铂2。假设它将是

class=“可切换的”

在上述方法的开头，不要隐藏每个元素，但要执行以下简单操作：

$(".switchable").hide();

然后根据单选按钮中的值对每个元素应用一些不同的属性。这将是：

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

---

希望您了解我的想法

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

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

---

至少这会使您的代码可读

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

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

---

至少这会使您的代码可读

那么，您能在您的银、金等中添加一个

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

---

那么，您能在您的银牌、金币等中添加一个

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

---

那么，你为什么不使用一些金属类：

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

函数重置（）{
$（“.metals”）.hide（）；
}
var gElems=[“银”、“银2”、“银3”、“银4”、“金”，
“黄金2”、“黄金3”、“铂金”、“铂金2”]；
$（函数（）{
重置（）；
$（“输入[name='period']”）。更改（函数（）{
var val=$（“输入[name='period']：选中”）.val（）；
重置（）；
如果（val>0&&val

---

（未测试）

为什么不使用一些金属类，那么：

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

函数重置（）{
$（“.metals”）.hide（）；
}
var gElems=[“银”、“银2”、“银3”、“银4”、“金”，
“黄金2”、“黄金3”、“铂金”、“铂金2”]；
$（函数（）{
重置（）；
$（“输入[name='period']”）。更改（函数（）{
var val=$（“输入[name='period']：选中”）.val（）；
重置（）；
如果（val>0&&val

（未测试）

使用“类”的人！！！为什么滑倒了，谢谢。我会给这一个镜头，会得到你的结果，感谢阿甘曼使用“类”！！！为什么滑倒了，谢谢。我会试一试，我会告诉你结果的，再次谢谢