jquery - クラスのすべてのdivを非表示にし、追加のクラスを持つ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を使用して、追加のクラスとして「sold」または「forsale」を持つものを除くすべての「chairdiv」divを非表示にできますか？

私は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

divを非表示にする方法を具体的に尋ねたので（非表示にしたくないchairdivクラスを持つ可能性のある他のタグがある場合）（「div」がクラス名に含まれているので面白いように聞こえますが、具体的に尋ねましたdivの場合）：

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

Answer 3

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

これは、「chardiv」クラスを持つすべての要素を取得し、「sold」または「forsale」クラスを持つ要素のみを返します。