如何在jquery中添加和条件过滤？

时间：2017-04-13 01:59:23

标签： javascript jquery

我想在jquery中设置filter。我能够individual过滤。但是这两个过滤器不能同时工作

这是我的代码 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 场地它会显示正确的结果（两个结果有场地＆＃34; Mumbai＆＃34;）

预期结果   - 如果我从团队中选择Sunrisers Hyderabad而venue选择Mumbai则只显示一个结果（孟买印第安人队与日月海德拉巴队）

2 个答案:

答案 0 :(得分：1)

您需要同时比较所有过滤器。这是一种不依赖于过滤器数量的通用方法。例如，您可以通过仅添加它使用的类前缀和它的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>

答案 1 :(得分：0)

您的代码存在问题。 首先隐藏所有内容，然后显示一个匹配team，但是当您选择第二个匹配时，您再次隐藏所有内容然后显示一个匹配venue，您将永远无法获得正确的结果。

为了解决这个问题，我将两个更改事件都移到了一个并调用另一个函数update()

在更新中我们从选择列表中选择val（）然后比较， 你可以有4种情况：

  1. 都是ALL，只显示所有
  2. team = All and venue = xxx，然后显示所有比赛场地
  3. 场地=全部和团队= xxx，然后显示所有匹配团队

  4. team = xxx和venue = yyy，然后使用：

    进行匹配

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

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

相关问题
最新问题