Question

我正在尝试使用li在下拉列表的更改事件中过滤我的filter function。我添加了名称类 team-MI team-SRH。如果我从下拉列表中选择Mumbai Indians。它应该只显示Mumbai Indians li。Mumbai Indians使用我想要的值MI过滤我的清单。

filter函数可以执行此操作。

这是我的代码 https://jsbin.com/laritakevi/edit?html,js,output

HTML

<!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>
<select id="patientType">
     <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>

  <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>

JS

$(function(){
  var arr=[];
      //all li
    console.log($('ul li'))
$('#patientType').on("change",function() {
   //Your code here
  console.log(this.value );
  $('ul li').filter(function(item){
    console.log($(item).attr('class').indexOf(this.value))
    return $(item).attr('class').indexOf(this.value) != -1
  })
});  
})

Answer 1

为什么需要使用.filter（）？我通常通过隐藏所有元素然后显示具有匹配条件的元素来解决这些情况。这种情况通过类'team-'+输入值。

这是针对特定情况的JavaScript;

$(function(){

  $('#patientType').on("change",function() {

    var val = $(this).val();
    $('ul li').hide();
    $('ul').find('.team-' + val).show();

  });  

});

这会隐藏所有列表元素，然后显示具有匹配类的元素。

Answer 2

我认为我们也可以使用：

$(function(){
  $('#patientType').on("change",function() {
    var val = $(this).val();
     $('ul li').not('.team-' + val).hide();
  });  
});

我没试过。

如何使用过滤功能来显示li？

2 个答案: