jquery - 隐藏一个类的所有 div，只显示具有附加类的那些

Question

我有一个宽度为“chairdiv”类的DIVS（商店页面上的产品）列表。我希望能够过滤具有附加类的 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”作为附加类的那些？

我精通 HTML/CSS，但我对 JavaScript 知之甚少。

谢谢！

Answer 1

我的第一个想法：

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

JS 小提琴演示。

针对 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 小提琴演示。

参考：

• click().
• event.preventDefault().
• hide().
• not().

Answer 2

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

这需要所有具有“chardiv”类的元素，然后只返回那些具有“sold”或“forsale”类的元素。

Answer 3

由于您特别询问了如何隐藏 div（以防您有其他标签可能包含chairdiv您不想隐藏的类）（我知道这听起来很有趣，因为“div”在类名中，但您确实问过对于div）：

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