1つまたは2つの属性を持つjqueryでフィルタdivs

Question

divフィルタにクラス属性が1つある場合、niceが機能しています。 しかし、2番目の属性を追加したい場合は、混乱します。

私はdivでリストされている車がたくさんあります。 #parentの子divには、フィルタリングのためのフラグである属性があります。ここで

はhtmlコードです：

<button class="active btn" id="all">All</button> 
<button class="btn" id="Manual">Manual</button> 
<button class="btn" id="Automatic">Automatic</button> 
<div id="parent"> 
    <div class="Manual">something</div> 
    <div class="Automatic">something</div> 
    .... 
</div> 

ボタンフィルターのショーを打つか、属性でdivを非表示にします。 ここにjqueryがあります：

var selectedVehicleTypes = ["all"]; 
var $btns = $('.btn').click(function() { 
if (this.id == 'all') { 
    $('#parent > div').fadeIn(450); 
    selectedVehicleTypes = ["all"]; 
    $(".btn").removeClass("active"); 
    $(".btn").first().addClass("active"); 
} 
else { 
    var allIndex = $.inArray("all", selectedVehicleTypes); 
    if (allIndex > -1) { 
     selectedVehicleTypes.shift(); 
     console.log(selectedVehicleTypes); 
    } 

    var catIndex = $.inArray(this.id, selectedVehicleTypes); 
    if (catIndex > -1) { 
     selectedVehicleTypes.splice(catIndex, 1); 
    } 
    else { 
     selectedVehicleTypes.push(this.id); 
    } 

    if (selectedVehicleTypes.length == 0) { 
     $('#parent > div').fadeIn(450); 
     selectedVehicleTypes = ["all"]; 
     $(".btn").removeClass("active"); 
     $(".btn").first().addClass("active"); 
    } 
    else { 
     $(".btn").each(function (index, el) { 
      if (this.id.length > 0) { 
       var selector = "." + this.id; 
       var btnIndex = $.inArray(this.id, selectedVehicleTypes); 
       if (btnIndex > -1) { 
        $(selector).fadeIn(450); 
        $(this).addClass("active"); 
       } 
       else { 
        $(selector).hide(); 
        $(this).removeClass("active"); 
       } 
      } 
     }); 
    } 
} 

これは正しく動作しています。しかし、2つのオプションも追加すると、混乱します。

<button class="btn" id="Benzin">Benzin</button> 
<button class="btn" id="Diesel">Diesel</button> 

<div id="parent"> 
    <div class="Manual Diesel">something</div> 
    <div class="Automatic Diesel">something</div> 
    ... 
</div> 

動作しません。どうすればこの問題を解決できますか？ありがとう。

Answer 1

ここでは、クラスのjQueryセレクタの2つの例を示します。

$('.Automatic') これは、自動クラスを持つすべてを取得します。

$('.Automatic, .Diesel') これは、自動またはディーゼルのいずれかを持つすべてを取得します。

$('.Automatic.Diesel') これは、自動とディーゼルの両方を持つすべてを取得します。

$('.Automatic', '.Diesel') これはもう少し複雑ですが、最初はすべてディーゼルであり、自動を持つ子要素があり、それを返すと言います。

最後の3との差はごくわずかであり、その違いが世界を変えます。