有效隐藏和显示类
有效隐藏和显示类
提问于 2016-11-25 08:27:39
我想知道是否可以将下面的代码简化/规范化为更有效的代码。代码的工作原理是应该的，但我认为它可能更小。当选择无线电选项时，它基本隐藏并显示类。
$("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");
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-25 09:08:44
通过该数据值使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40800565
复制相关文章
相似问题
腾讯云开发者
