使用jQuery过滤元素

Question

HTMl和JS：

$('select').on('change', function(e) {

  var filters = {};
  $('select').each(function(index, select) {
    var value = String($(select).val());
    // if comma separated
    if (value.indexOf(',') !== -1) {
      value = value.split(',');
    }
    filters[$(select).attr('name')] = value;
  });

  $('li').each(function(i, item) {

    var show = true;
    $.each(filters, function(name, val) {
      if (val === "null") {
        return;
      }
      if (name === 'author' && $(item).data('author').indexOf(val) === -1) {
        show = false;
      } else($(item).data(name) !== val) {
        show = false;
      }
    });

    if (show) {
      $(item).show();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="filters">
  <select name="tag">
        <option value="Tag1">Tag1</option>
        <option value="Tag2">Tag2</option>
      </select>
  <select name="author">
        <option value="John Appleseed">John Appleseed</option>
        <option value="Lisa Hayden">Lisa Hayden</option>
        <option value="Trevor McGregor">Trevor McGregor</option>  
      </select>
</form>

<ul class="list">
  <li data-tag="Tag1" data-author="John Appleseed">Item 1</li>
  <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li>
  <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li>
</ul>

我正在尝试使过滤器在列表中工作。我基本上需要的是根据选择显示div。我能够使单个过滤器工作但不是所有过滤器都在一起工作（例如，如果作者是x并且包含标签..显示其他隐藏）

Answer 1

    $('select').on('change', function(e) {

      var filters = {};
      $('select').each(function(index, select) {
          var value = String($(select).val());
          // if comma separated
          if (value.indexOf(',') !== -1) {
              value = value.split(',');
          }
          filters[$(select).attr('name')] = value;
      });

      $('li').each(function(i, item) {

          var show = true;
          $.each(filters, function(name, val) {
              if (val === "null") { return; }

              if (name === 'author' && $(item).data('author').indexOf(val) === -1) {
                  show = false;
              } else if( $(item).data(name).indexOf(val) === -1) {
                  show = false;
              }
          });

          if (show) {
              $(item).show();
          }else{
              $(item).hide();
          }
      });

    });

<form id="filters">
  <select name="tag">
    <option value="Tag1">Tag1</option>
    <option value="Tag2">Tag2</option>
    <option value="Tag3">Tag3</option>
  </select>
  <select name="author">
    <option value="John Appleseed">John Appleseed</option>
    <option value="Lisa Hayden">Lisa Hayden</option>
    <option value="Trevor McGregor">Trevor McGregor</option>  
  </select>
</form>

<ul class="list">
  <li data-tag="Tag1" data-author="John Appleseed">Item 1</li>
  <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li>
  <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

您的脚本中存在错误：

替换此行

} else($(item).data(name) !== val) {

这一行

} else if( $(item).data(name).indexOf(val) === -1) {

Answer 2

您可以使用.filter()和.indexOf()过滤.show()仅data-*个属性匹配的元素，.siblings()到.hide()元素不匹配

＆＃13;

＆＃13;

var select = $("select").on("change", function(e) {
  var filtered = li.filter(function(i, el) {
    return this.dataset.tag
          .indexOf(select.filter("[name=tag]").val()) > -1 
           && this.dataset.author
              .indexOf(select.filter("[name=author]").val()) > -1 
   });
   if (filtered.length) filtered.show().siblings().hide();
   else li.hide();
});

var li = $(".list li").hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="filters">
  <select name="tag">
    <option value="Tag1">Tag1</option>
    <option value="Tag2">Tag2</option>
    <option value="Tag3">Tag3</option>
  </select>
  <select name="author">
    <option value="John Appleseed">John Appleseed</option>
    <option value="Lisa Hayden">Lisa Hayden</option>
    <option value="Trevor McGregor">Trevor McGregor</option>  
  </select>
</form>

<ul class="list">
  <li data-tag="Tag1" data-author="John Appleseed">Item 1</li>
  <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li>
  <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;