Question

我有2个选择，我想根据这两个选项过滤元素。

reverse

现在我调用jQuery过滤器函数来过滤元素（例如在属性颜色'Red'上）：

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

虽然有2个选择器，但这变得非常麻烦，因为我需要以正确的方式动态应用，重新应用和删除这些过滤器，以便从所选的选项中获得我想要的内容。

我已经尝试创建变量以检查其他选择器中是否有某些内容被更改但是这很快失控了很多不同的变量以及if语句。

最好和最有效的方法是什么？有点新的JS和jQuery。

Answer 1

我就是这样做的：

修复您的html并将属性更改为数据属性
在变量中缓存您的选择和div
为您的选择提供一个通用课程
将更改绑定到类并过滤：

＆＃13;

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
});

＆＃13;

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

＆＃13;

Answer 2

您可以使用val select根据颜色属性过滤div

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

您的html也是invalid。

您需要关闭颜色属性qoutes周围的value。另外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>

使用多个<choices>在对象上添加过滤器

2 个答案: