有效的隐藏和显示类

Question

我想知道下面的代码是否可以 simplified/normalized 更有效。该代码可以正常工作，但我认为它可以更小。它基本上是在选择单选选项时隐藏和显示类。

$("input[type='radio']").click(function () {    
      if ($("#type1").is(":checked")) {
    $("#showstoring").show("fast") &&
    $("#showonderhoud").hide("fast") &&
    $("#showspoed").hide("fast");
    } else if ($('#type2').is(':checked')) {
    $("#showstoring").hide("fast") &&
    $("#showonderhoud").hide("fast") &&
    $("#showspoed").show("fast");
    } else if ($('#type0').is(':checked')) {
    $("#showstoring").hide("fast") &&
    $("#showonderhoud").show("fast") &&
    $("#showspoed").hide("fast");
    } else {
    $("#showstoring").hide("fast") &&
    $("#showonderhoud").hide("fast") &&
    $("#showspoed").hide("fast");
    }
});

Answer 1

使用 data-* 属性通过该数据值交叉引用按钮和元素：

var $content = $("[data-content]");

$("input[type='radio']").on("change", function() {
  $content.hide(260).filter("[data-content='"+ this.dataset.show +"']").show(260);
});

[data-content]{display:none;} /* hide initially */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" data-show="1" name="r">A
<input type="radio" data-show="2" name="r">B
<input type="radio" data-show="3" name="r">C
<input type="radio"               name="r" checked> Else?<br>

<div data-content="1">AAA</div>
<div data-content="2">BBB</div>
<div data-content="3">CCC</div>

有效的隐藏和显示类

Effective hide & show classes

html

javascript

jquery

show

hide

有效的隐藏和显示 类

Effective hide & show classes

html

javascript

jquery

show

hide

有效的隐藏和显示类