Question

我有2個選擇的，我想基於這些2.

<div id="elements"> 
     <div class='anElement' id="1" height="30" color="Red">elem1</div> 
     <div class='anElement' id="2" height="45" color="Blue">elem2</div> 
     <div class='anElement' id="2" height="30" color="Blue">elem3</div> 
     <div class='anElement' id="2" height="60" color="Blue">elem4</div> 
</div> 

<select id="select1"> 
     <option value="all">All</option> 
     <option value="Blue">B</option> 
     <option value="Red">R</option> 
</select> 
<select id="select2"> 
     <option value="all">All</option> 
     <option value="45">T</option> 
     <option value="50">NST</option> 
</select> 

現在我打電話jQuery的過濾功能，過濾元件的選擇過濾元素（例如在屬性顏色「紅」）：

$('#select1').on('change',function(){ 
     if ($('#select1').val() == 'Red') { 
      $('#elements .anElement').hide().filter('[color*="'Red' "]').show(); 
} 
... 

這變得很凌亂，雖然有2個選擇，因爲我需要申請，重新申請並從所選擇的選項，以便正確的方式，我得到動態刪除這些過濾器我想要什麼。

我已經嘗試創建變量來檢查是否在另一個選擇器中發生了變化，但這非常快速地與很多不同的變量和其他語句無關。

什麼是最好和最有效的方法來做到這一點？有點新的JS和jQuery。

Answer 1

這是我會怎麼做：

1. 解決您的HTML和改變屬性的數據屬性
2. 緩存的變量選擇和div的
3. 給你的選擇一個共同的類
4. 綁定到類和過濾器的變化：

var select1 = $('#select1'), 
 
    select2 = $('#select2'), 
 
    elements = $('.anElement'); 
 

 
$('.filter').on('change', function() { 
 
    // hide all divs 
 
    elements.hide(); 
 

 
    // filter divs depending on elects 
 
    elements.filter(function() { 
 
    var element = $(this), 
 
     select1Val = select1.val(), 
 
     select2Val = select2.val(); 
 

 
    if (select1Val === 'all' && select2Val === 'all') { 
 
     // return everything if both filters are all 
 
     return true; 
 
    } else if (select1Val === 'all') { 
 
     // only filter on height 
 
     return element.data('height') == select2.val(); 
 
    } else if (select2Val === 'all') { 
 
     // only filter on color 
 
     return element.data('color') == select1.val(); 
 
    } else { 
 
     //filter on both 
 
     return element.data('color') == select1.val() && element.data('height') == select2.val(); 
 
    } 
 
    }).show(); // show the matching divs 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="elements"> 
 
    <div class='anElement' id="1" data-height="30" data-color="Red">red 30</div> 
 
    <div class='anElement' id="2" data-height="45" data-color="Blue">blue 45</div> 
 
    <div class='anElement' id="2" data-height="30" data-color="Blue">blue 30</div> 
 
    <div class='anElement' id="2" data-height="60" data-color="Blue">blue 60</div> 
 
</div> 
 

 
<select id="select1" class="filter"> 
 
    <option value="all">All</option> 
 
    <option value="Blue">B</option> 
 
    <option value="Red">R</option> 
 
</select> 
 
<select id="select2" class="filter"> 
 
    <option value="all">All</option> 
 
    <option value="45">T</option> 
 
    <option value="50">NST</option> 
 
</select>

Answer 2

您可以使用selectval過濾基於顏色屬性

$('#select1').on('change', function() { 
    $("div.anElement").hide(); 
    $("div.anElement[color=" + $(this).val() + "]").show(); 
}); 

另外的div你html是invalid。

您需要關閉顏色屬性value附近的qoutes。此外id elements是無效的，應該id="elements"

<div id="elements"> 
     <div class='anElement' id="1" height="30" color="Red"></div> 
     <div class='anElement' id="2" height="45" color="Blue"> </div> 
     <div class='anElement' id="Div1" height="30" color="Blue"> </div> 
     <div class='anElement' id="Div2" height="60" color="Blue"> </div> 
</div> 

<select id="select1"> 
     <option value="all">All</option> 
     <option value="Blue">B</option> 
     <option value="Red">R</option> 
</select> 
<select id="select2"> 
     <option value="all">All</option> 
     <option value="45">T</option> 
     <option value="50">NST</option> 
</select>