効果的なhide＆showクラス

Question

以下のコードをより効率的に簡略化/正規化できるかどうかは疑問です。コードは、それが小さくなる可能性があると思っていますが、それは動作するはずです。ラジオオプションが選択されると、基本的にクラスを非表示にして表示します。

$("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>