javascript - 使用 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 并且包含标签 .. show else hide)

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