我是 jQuery 的新手,也是 JS 的新手(一点知识),我想创建一个 jQuery 代码。
首先,这是我的 HTML 代码:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
我想要一个可以执行以下操作的 jQuery 代码:
如果我单击 #choice-asus DIV,则所有具有 .htc 类的 DIV 都将设置为 display="none"
如果我点击 #choice-htc DIV,那么所有带有 .asus 类的 DIV 都将设置为 display="none"
如果我点击#choice-all DIV,那么所有 DIV 都将设置为 display="inline-block"(这也是页面首次加载时的默认设置)
<
我已经尝试过以下代码,但它没有做任何事情。
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
感谢您的帮助, 迪伦。
最佳答案
这么多选择:) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
关于javascript - jQuery - 如果 DIV 类等于 X,则隐藏所有其他具有不同类的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13062611/