javascript - 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. 如果我单击#choice-asus DIV，则所有具有 .htc 类的 DIV 都将设置为 display="none"

2. 如果我单击#choice-htc DIV，则所有具有 .asus 类的 DIV 都将设置为 display="none"

3. 如果我单击#choice-all DIV，则所有 DIV 都将设置为 display="inline-block"（这也是页面首次加载时的默认设置）

我已经尝试过以下代码，但它没有做任何事情。

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

演示在这里

$(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();
        }
    });
});

Answer 3

为了保持简单和清洁，您应该使用这样的解决方案

$(function(){
    $('#choice-asus').on('click', function(){
        $('#devices > div:not(.asus)').hide();
    });
});

它基本上说，如果你点击#choice-asus，隐藏#devices中没有华硕类的所有 div。

您可以根据自己的需要扩展/修改它。此外，它建议使用 jquerys .on() 方法而不是单击/绑定或您应用的任何处理程序。

Answer 4

$(document).ready(function(){
    if($('div').attr('class')=='X')
    {
         $('div').not($(this)).css('display','none');
    }
});

Answer 5

尝试使用 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 6

您可以尝试以下代码 -

function showAll(){
    $("#devices div").show();
}
function justASUS(){
    $("#devices div").hide();
    $("#devices .asus").show();
}
function justHTC(){
    $("#devices div").hide();
    $("#devices .htc").show();    
}

演示在这里。