チェックボックスの値に基づいてクラスを表示/非表示Jquery

Question

現在、私はフィルタリングアプリケーションを開発中です。顧客は黒をクリックしたときに、それが黒の製品が表示されますですIAM何をしてだからここに私のhtmlとjsのコード

jQuery(document).ready(function($){ 
 
    
 
    $(".color-label").on("click",function(){ 
 
\t 
 
\t var color_box_val= $(this).find('.color-box').val(); 
 
\t $('.test-li').hide(); 
 
\t $('div:contains('+color_box_val+')').closest('.test-li').show(); 
 
\t }); 
 
    
 
});

.hidden-color{ 
 
    display:none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
<label class="color-label">Red<input type="checkbox" class="color-box" value="red"/></label> 
 
<label class="color-label">Black <input type="checkbox" class="color-box" value="Black"/></label> 
 

 

 
<ul> 
 
<li class="test-li"> 
 
    <div class="test-div"> 
 
    <p class="hidden-color">red</p> 
 
\t red poduct 
 
    </div> 
 
</li> 
 
    <li class="test-li"> 
 
    <div class="test-div"> 
 
    <p class="hidden-color">Black</p> 
 
\t black Product 
 
    </div> 
 
</li> 
 
<li class="test-li"> 
 
    <div class="test-div"> 
 
    <p class="hidden-color">Blue</p> 
 
\t blue Product 
 
    </div> 
 
</li>

を参照してください。顧客が赤と黒の両方をクリックした場合、両方を表示する必要があり、顧客が何もチェックしなかった場合、すべての製品を表示する必要があります。

しかし、私はいくつかの点で立ち往生しました。クリックしたときに赤と黒の両方を表示するにはどうすればいいですか？現在、新しくクリックされたチェックボックスに基づいて結果を表示しています。また、すべてのものをアンチックすると、すべてのボックスを表示する必要があります。提案してください 。

Answer 1

まず、変更することをお勧めするのは、リストアイテムにカラーデータを保存する方法です。それらを隠れた段落要素に格納するのではなく、HTML5のデータ属性として保存してみましょう。

それが完了したら、あなたが意図し何をするのは非常に簡単です：基本的にOR操作である、すなわち、赤と黒のチェックが入っているとき、あなたは黒赤またはある項目を示したいと思います。

ロジックは以下の通りである：あなたがたが、このイベントが発生した場合、あなたはすべてのこれらのチェックボックスの値を収集したい

すべてのチェックボックスに.change()イベントに耳を傾ける

1. 場合にのみ、彼らチェックされます。これは、チェックされたチェックボックスを選択するのに.filter(':checked')を使用し、配列を返すために.map()を使用して行います。
2. 次に、すべてのリスト項目を反復処理します。アレイ内の値がdata-colorの場合、それらの値が表示されます。さもなければそれらを隠す。

とチェックボックスのいずれかがフィルタリングされている場合は、すべてこのロジックをチェックし、条件文の中に包まれている：

• 何がチェックされていない場合は一つ以上の場合、我々は任意のフィルタリング
• を望んでいません上記のフィルタリングロジックを使用してフィルタリングを実行します。

アップデート：私は.toLowerCase()を使用して、すべての色の値を小文字に変換しました値は任意に大文字にすることができる。