jQuery -如果DIV类等于X，则用不同的类隐藏所有其他DIV

Question

我对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代码，它可以执行以下操作：

1. 如果我单击#选项-asus，那么带有.htc类的所有DIV都将被设置为display="none“。
2. 如果我点击#选项-htc，那么所有.asus类的DIV都将被设置为display="none“。
3. 如果我单击#，那么所有DIV都将被设置为display=“内联块”(这也是页面第一次加载时的默认设置)。

我已经尝试过以下代码，但它什么也不做。

$(document).ready(function(){
    $("#choice-htc").click(function(){
        $(".htc").hide();
    })
});

谢谢你的帮助迪伦。

Answer 1

如此多的选择:) 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();
         }); 
     });

Answer 2

尝试使用jquery

演示

$('#choice-all').click(function(){
  $('.htc, .asus').show();
});

$('#choice-asus').click(function(){
  $('.asus').show();
  $('.htc').hide();
});

$('#choice-htc').click(function(){
  $('.htc').show();
  $('.asus').hide();
});   

Answer 3

这里的演示

$(document).ready(function(){   
    $(".choice").click(function(){
         $(".android,.winph").hide();
        if($(this).attr("id")=="choice-all"){
            $(".android,.winph").show();
        }else if($(this).attr("id")=="choice-asus"){
            $(".asus").show();
        }else if($(this).attr("id")=="choice-htc"){
            $(".htc").show();
        }
    });
});