jqueryの切り替え方法は、複数のフィルタリングとして機能するhide/show機能を切り替えますか？

Question

私のページには、それぞれのクラスを表示/非表示にするフィルターとして機能する3つのテキストがあります。

1. すべての項目
2. 「すべての項目は、」クラスitemsを持つすべてのdivが隠されている、クリックすると、取り消し線がある。例えばアイテム
3. アイテムB

、 「すべてのアイテム」テキストを表示します。

同じことが他の2つのオプションのために行きます。 3は、別のオプションでは特に「すべてのアイテム」を組み合わせるしているときに私が直面しています

論理エラーです。 「すべてのアイテム」をクリックした場合例えば

、その後、「アイテムA」、「アイテム」が表示されますが、「すべてのアイテム」に取り消し線が残っています。

あなたは以下の私のコードを見ることができます。

は、どのように私は、この「論理」エラーを修正し、優れたフィルタリング機能を持つことができますか？

$(".itemA").click(function() { 
 
    $(".itemA-item").toggle(800); 
 
    $(".itemA").toggleClass("striketrough-line"); 
 
}); 
 
$(".itemB").click(function() { 
 
    $(".itemB-item").toggle(800); 
 
    $(".itemB").toggleClass("striketrough-line"); 
 
}); 
 
$(".all-items").click(function() { 
 
    $(".items").toggle(800); 
 
    $(".all-items").toggleClass("striketrough-line"); 
 
});

.striketrough-line { 
 
    text-decoration: line-through; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:30%;float:left;"> 
 
<h3> 
 
filters 
 
</h3> 
 
<p class="all-items"> 
 
all items 
 
</p> 
 
<p class="itemA"> 
 
items A 
 
</p> 
 
<p class="itemB"> 
 
items B 
 
</p> 
 
</div> 
 

 
<div style="width:69%;float:left"> 
 
<h3> 
 
the items 
 
</h3> 
 
<div class="items itemA-item"> 
 
    <p>itemA 1</p> 
 
</div> 
 
<br> 
 
<div class="items itemB-item"> 
 
    <p>itemB 2</p> 
 
</div> 
 
<br> 
 
<div class="items itemA-item"> 
 
    <p>itemA 3</p> 
 
</div> 
 
<br> 
 
<div class="items itemB-item"> 
 
    <p>itemB 4</p> 
 
</div> 
 
</div>

Answer 1

シンプルでクリーンな解決策ではなく、各項目に個別にitemsクラスを適用するので<div class="items">内のすべてのアイテムが含まれていることであろう。そうすることで、特定の項目グループのいずれかをオンまたはオフに切り替えるときに、親要素が表示されない場合（すべての項目を無効にすることによって）、その子要素も表示されません。

$(".itemA").click(function() { 
 
    $(".itemA-item").toggle(800); 
 
    $(".itemA").toggleClass("striketrough-line"); 
 
}); 
 
$(".itemB").click(function() { 
 
    $(".itemB-item").toggle(800); 
 
    $(".itemB").toggleClass("striketrough-line"); 
 
}); 
 
$(".all-items").click(function() { 
 
    $(".items").toggle(800); 
 
    $(".all-items").toggleClass("striketrough-line"); 
 
});

.striketrough-line { 
 
    text-decoration: line-through; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:30%;float:left;"> 
 
    <h3>filters</h3> 
 
    <p class="all-items">all items</p> 
 
    <p class="itemA">items A</p> 
 
    <p class="itemB">items B</p> 
 
</div> 
 

 
<div style="width:69%;float:left"> 
 
    <h3>the items</h3> 
 
    <div class="items"> 
 
     <div class="itemA-item"> 
 
      <p>itemA 1</p> 
 
     </div> 
 
     <br> 
 
     <div class="itemB-item"> 
 
      <p>itemB 2</p> 
 
     </div> 
 
     <br> 
 
     <div class="itemA-item"> 
 
      <p>itemA 3</p> 
 
     </div> 
 
     <br> 
 
     <div class="itemB-item"> 
 
      <p>itemB 4</p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

あなたはすべての取り消し線があるかどうかを確認するためのメカニズムを使用することができます。

ここで修正されたバージョンです。真の場合、それはitemA & itemBの機能性を占有する。

あなたはこれであなたのJSを更新し、確認することができます：

var st_all = false; 
$(".itemA").click(function() { 
    if(!st_all) 
    { 
     $(".itemA-item").toggle(800); 
     $(".itemA").toggleClass("striketrough-line"); 
    } 
}); 
$(".itemB").click(function() { 
    if(!st_all) 
    { 
     $(".itemB-item").toggle(800); 
     $(".itemB").toggleClass("striketrough-line"); 
    } 
}); 
$(".all-items").click(function() { 
    $(".items").toggle(800); 
    $(".all-items").toggleClass("striketrough-line"); 
    st_all = !st_all; //toggle st_all 
    $(".itemA").toggleClass("striketrough-line"); 
    $(".itemB").toggleClass("striketrough-line"); 
}); 

更新：あなたは「すべてのアイテム」をクリックした場合、すべての項目にストライキを強制的に強制するメカニズムを使用することができます。

var st_all = false, force_st_all = false; 
$(".itemA").click(function() { 
    if(!st_all) 
    { 
     $(".itemA-item").toggle(800); 
     $(".itemA").toggleClass("striketrough-line"); 
     force_st_all = true; 
    } 
}); 
$(".itemB").click(function() { 
    if(!st_all) 
    { 
     $(".itemB-item").toggle(800); 
     $(".itemB").toggleClass("striketrough-line"); 
     force_st_all = true; 
    } 
}); 
$(".all-items").click(function() { 
    st_all = !st_all; //toggle st_all 
    if (force_st_all) { 
     $(".items").hide(800); 
     $(".all-items").addClass("striketrough-line"); 
     $(".itemA").addClass("striketrough-line"); 
     $(".itemB").addClass("striketrough-line"); 
     force_st_all = !force_st_all; 
    } 
    else { 
     $(".items").toggle(800); 
     $(".all-items").toggleClass("striketrough-line"); 
     $(".itemA").toggleClass("striketrough-line"); 
     $(".itemB").toggleClass("striketrough-line"); 
    } 
}); 

ライブリンク：ここでは、に打撃を与えることができ、コードのスケーラブルではありませんので、http://jsfiddle.net/fyagLwxq/