Question

我有一个DIVS（商店页面上的产品）列表，宽度为“chairdiv”类。我希望能够过滤具有附加类的DIVS，这是一个例子：

<div class="chairdiv sold"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv sold"></div>
<div class="chairdiv forsale"></div>

默认情况下，页面会显示所有这些div，我可以使用javascript来隐藏所有“chairdiv”div除了那些带有“sold”或“forsale”作为附加类的div吗？

我是HTML / CSS精通但我知道javascript很少。

谢谢！

Answer 1

我的第一个想法：

$('.chairdiv').not('.sold, .forsale').hide();

JS Fiddle demo

已编辑以回应OP提出的问题：

你能告诉我如何用HTML激活这个功能吗？例如，要仅显示<div class="chairdiv sold"></div>，我可以在此处添加：<a href="(what here)">show sold chairs</a>

为此：

<a href="#" id="showChairsAndSold">Show chairs and sold</a>

$('#showChairsAndSold').click(
    function(e){
        e.preventDefault(); // prevents any default action
        $('.chairdiv').not('.sold, .forsale').hide();
    });

JS Fiddle demo

参考文献：

Answer 2

$(".chairdiv").filter('.sold, .forsale');

这将使用“chardiv”类获取所有元素，然后仅返回类别为“sold”或“forsale”的元素。

Answer 3

因为您特别询问了如何隐藏div（如果您有其他标签可能包含想要隐藏的chairdiv类）（我知道这听起来很有趣）因为“div”在类名中，但你确实专门询问了divs：

$("div.chairdiv").not(".sold, .forsale").hide();

隐藏类的所有div，仅显示具有其他类的div

3 个答案: