如何在jquery中添加和條件過濾器？

-1

我試圖讓jQuery中filter。我是能夠使individual過濾器。但兩個過濾不得同時如何在jquery中添加和條件過濾器？

在這裏工作是我的代碼 https://jsbin.com/suhukuyavu/edit?html,js,output

$(function(){ 
    var arr=[]; 
     //all li 
    console.log($('ul li')) 
$('#matchselector').on("change",function() { 
    //Your code here 
    console.log(this.value); 
    var val = $(this).val(); 
    $('ul li').hide(); 
    $('ul').find('.team-' + val).show(); 

}); 

    $('#venueselector').on("change",function() { 
    //Your code here 
    console.log(this.value); 
    var val = $(this).val(); 
    $('ul li').hide(); 
    $('ul').find('.venue-' + val).show(); 

}); 
})

當我選擇Mumbai Indians顯示正確的結果。顯示三個結果（與孟買印度人相匹配）
再次運行JS選擇Mumbai場地從場館下拉它顯示正確的結果（兩個結果其中有場地「Mumbai」）

進出料口把 - 如果我選擇球隊Sunrisers Hyderabad和venue爲Mumbai，只顯示一個結果（孟買印度人隊VS Sunrisers海得拉巴）

來源

2017-04-13 user944513

似乎工作大多好。我能找到的唯一明顯的錯誤是選擇「全部」產生一個空列表。 – Ouroborus

它不給正確的結果 – user944513

它是不是給..In同時使用'select'值是不是給普通solution..check預期輸出 – user944513

你需要將所有過濾器在同一時間進行比較。這是一個不依賴於過濾器數量的通用方法。例如，你可以很快只會增加它使用的類前綴添加其他過濾器中選擇，它的ID選擇

解決方案創建過濾器類的數組，並加入他們創造選擇顯示

$(function() { 
 

 
    var $items = $('li[itemprop="subEvent"]'); 
 
    // used to create class selectors based on select id 
 
    var classPrefixes = { 
 
    matchselector :'.team-', 
 
    venueselector:'.venue-' 
 
    } 
 

 
    var $sels = $('#matchselector, #venueselector').on("change", filterItems); 
 

 
    function filterItems() { 
 
    // filter selects with relevant values 
 
    var filterClasses = $sels.filter(function(i, select) { 
 
     return select.value !== 'All' 
 
     // map those values to array of class selectors 
 
     }).map(function(i,select) {  
 
     return classPrefixes[select.id] +select.value 
 
     }).get(); 
 

 
    if (filterClasses.length) { 
 
     // hide all then show matching classes 
 
     $items.hide().filter(filterClasses.join('')).show();  
 
    } else { 
 
     // show all when no filter classes 
 
     $items.show(); 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Team::: 
 
<select id="matchselector"> 
 
    <option value="All">All</option> 
 

 
    <option value="MI">Mumbai Indians</option> 
 
    <option value="SRH">Sunrisers Hyderabad</option> 
 
    <option value="RCB">Royal Challengers Bangalore</option> 
 
    <option value="GL">Gujarat Lions</option> 
 
    <option value="RPS">Rising Pune Supergiant</option> 
 
    <option value="KXIP">Kings XI Punjab</option> 
 

 
</select> 
 
venue:: 
 
<select id="venueselector"> 
 
    <option value="All">All</option> 
 

 
    <option value="Mumbai">Mumbai</option> 
 
    <option value="Kolkata">Kolkata</option> 
 
    <option value="Bangalore">Bangalore</option> 
 
    <option value="Rajkot">Rajkot</option> 
 
    <option value="Delhi">Delhi</option> 
 

 
</select> 
 

 
<ul> 
 
    <li itemscope="" itemprop="subEvent" class="team-MI team-SRH venue-Mumbai live"> 
 
    <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Mumbai Indians vs Sunrisers Hyderabad</div> 
 

 
    </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-KKR team-KXIP venue-Kolkata"> 
 
    <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Kolkata Knight Riders vs Kings XI Punjab</div> 
 

 
    </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-RCB team-MI venue-Bengaluru"> 
 
    <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Royal Challengers Bangalore vs Mumbai Indians</div> 
 
    </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-GL team-RPS venue-Rajkot"> 
 
    <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Gujarat Lions vs Rising Pune Supergiant</div> 
 
    </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-KKR team-SRH venue-Kolkata"> 
 
    <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Kolkata Knight Riders vs Sunrisers Hyderabad</div> 
 
    </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-DD team-KXIP venue-Delhi"> 
 
    <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Delhi Daredevils vs Kings XI Punjab</div> 
 
    </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-MI team-GL venue-Mumbai"> 
 
    <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Mumbai Indians vs Gujarat Lions</div> 
 
    </div> 
 
    </li> 
 

 
</ul>

來源

2017-04-13 04:51:04 charlietfl

的問題，你的代碼。首先你隱藏一切然後顯示一個匹配team，但是當你選擇第二個你再次隱藏所有內容然後顯示一個匹配venue，你永遠不會得到正確的結果。

來解決這個問題，我提出兩個更改事件之一，我們得到VAL（）從兩個選擇列表中選擇，然後比較調用另一個函數update()

在更新，你可以有4個的情況：

兩者俱得，只是顯示所有
團隊=所有和地點= XXX，那麼顯示一切比賽場地
場地=所有和團隊= XXX，那麼顯示一切參賽隊
團隊= xxx和場地= YYY，然後同時匹配使用：

$('ul').find('.team-' + team + '.venue-' + venue).show();

DONE！

$('#matchselector, #venueselector').on("change", update); 
 

 
function update() { 
 
    var venue = $('#venueselector').val(); 
 
    var team = $('#matchselector').val(); 
 

 
    $('ul li').hide(); 
 
    if (venue === 'All' && team === 'All') { 
 
    $('ul li').show(); 
 
    } else if (team === 'All') { 
 
    $('ul').find('.venue-' + venue).show(); 
 
    } else if (venue === 'All') { 
 
    $('ul').find('.team-' + team).show(); 
 
    } else { 
 
    $('ul').find('.team-' + team + '.venue-' + venue).show(); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <script src="https://code.jquery.com/jquery-2.0.3.js"></script> 
 

 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    Team::: 
 
    <select id="matchselector"> 
 
    <option value="All">All</option> 
 

 
    <option value="MI">Mumbai Indians</option> 
 
    <option value="SRH">Sunrisers Hyderabad</option> 
 
    <option value="RCB">Royal Challengers Bangalore</option> 
 
    <option value="GL">Gujarat Lions</option> 
 
    <option value="RPS">Rising Pune Supergiant</option> 
 
    <option value="KXIP">Kings XI Punjab</option> 
 

 
    </select> venue:: 
 
    <select id="venueselector"> 
 
    <option value="All">All</option> 
 

 
    <option value="Mumbai">Mumbai</option> 
 
    <option value="Kolkata">Kolkata</option> 
 
    <option value="Bangalore">Bangalore</option> 
 
    <option value="Rajkot">Rajkot</option> 
 
    <option value="Delhi">Delhi</option> 
 

 
    </select> 
 

 
    <ul> 
 
    <li itemscope="" itemprop="subEvent" class="team-MI team-SRH venue-Mumbai live"> 
 
     <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Mumbai Indians vs Sunrisers Hyderabad</div> 
 

 
     </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-KKR team-KXIP venue-Kolkata"> 
 
     <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Kolkata Knight Riders vs Kings XI Punjab</div> 
 

 
     </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-RCB team-MI venue-Bengaluru"> 
 
     <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Royal Challengers Bangalore vs Mumbai Indians</div> 
 
     </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-GL team-RPS venue-Rajkot"> 
 
     <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Gujarat Lions vs Rising Pune Supergiant</div> 
 
     </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-KKR team-SRH venue-Kolkata"> 
 
     <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Kolkata Knight Riders vs Sunrisers Hyderabad</div> 
 
     </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-DD team-KXIP venue-Delhi"> 
 
     <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Delhi Daredevils vs Kings XI Punjab</div> 
 
     </div> 
 
    </li> 
 
    <li itemscope="" itemprop="subEvent" class="team-MI team-GL venue-Mumbai"> 
 
     <div class="matchdetails"> 
 
     <div itemprop="performer" class="match-teams">Mumbai Indians vs Gujarat Lions</div> 
 
     </div> 
 
    </li> 
 

 
    </ul> 
 
</body> 
 

 
</html>

來源

2017-04-13 02:27:27

FYI'$（'＃ val（）'返回與$（'＃venueselector'）相同的結果find（「：selected」）。val（）' – charlietfl

@charlietfl thanks –

如何在jquery中添加和條件過濾器？

回答

相關問題