按类或jquery上的数据筛选表

Question

1. 当我首先选择“图标”显示“未找到”时出错，然后选择"Talisman“而不显示。应该显示“找不到”。
2. 是否可以这样做呢？

添加到类=f-图标f-环f-颈。然后按类查找值。

选择“图标环颈或环颈或颈环图标”并显示这条线。使它只在找到匹配时显示。

​

$(document).ready(function() {
(function() {
  var filters = {
    itemslot1: null,
    itemslot2: null,
    itemslot3: null
  };
  
  function updateFilters() {
    $(".table-data")
      .hide()
      .filter(function() {
        var self = $(this),
          result = true;

        Object.keys(filters).forEach(function(filter) {
          if (
            filters[filter] &&
            filters[filter] != "All"
          ) {
            result = result && filters[filter] === self.data(filter);
          }
        });

        return result;

      })

      .show();
  }

  function bindDropdownFilters() {
    Object.keys(filters).forEach(function(filterName) {
      $("#" + filterName + "-filter").on("change", function() {
        filters[filterName] = this.value;

        updateFilters();

        var $table = $('#filter-table'),
            $colLength = $table.find('thead th').length,
            $filteredCount = $table.find('tbody tr:visible').length;

        console.log($filteredCount);
        if ($filteredCount == 0) {
          $table.find('tbody').append($("<tr />").addClass("no-result").css({
            "text-align": "center"
          }).append($("<td />").attr("colspan", $colLength).html("Not found.")));
        } else {
           $(".no-result").remove();
          }
      });
    });
  }

  bindDropdownFilters();
})();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='table-filters'>
        <select id="itemslot1-filter">
          <option>All</option> 
          <option value="Icon">Icon</option>
          <option value="Ring">Ring</option>
          <option value="Waist">Waist</option>
          <option value="Talisman">Talisman</option>
          <option value="Sword Knot">Sword Knot</option>
          <option value="Neck">Neck</option>
        </select>
        <select id="itemslot2-filter">
          <option>All</option> 
          <option value="Icon">Icon</option>
          <option value="Ring">Ring</option>
          <option value="Waist">Waist</option>
          <option value="Talisman">Talisman</option>
          <option value="Sword Knot">Sword Knot</option>
          <option value="Neck">Neck</option>
        </select>
        <select id="itemslot3-filter">
          <option>All</option> 
          <option value="Icon">Icon</option>
          <option value="Ring">Ring</option>
          <option value="Waist">Waist</option>
          <option value="Talisman">Talisman</option>
          <option value="Sword Knot">Sword Knot</option>
          <option value="Neck">Neck</option>
        </select>
        </div>
            
        <table id="filter-table">
         <thead>
          <tr>
           <th>Slot 1</th>
           <th>Slot 2</th>
           <th>Slot 3</th>
          </tr>
          </thead>
          <tbody>
           <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist">
            <td>Ring</td>
            <td>Neck</td>
            <td>Waist</td>
           </tr>
           <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring">
            <td>Neck</td>
            <td>Waist</td>
            <td>Ring</td>
           </tr>
           <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring">
            <td>Sword Knot</td>
            <td>Neck</td>
            <td>Ring</td>
           </tr>
           <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring">
            <td>Ring</td>
            <td>Ring</td>
            <td>Ring</td>
           </tr>
           <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman">
            <td>Ring</td>
            <td>Ring</td>
            <td>Talisman</td>
           </tr>
          </tbody>
        </table>

​

Answer 1

为isZero提供一个布尔检查，以跟踪是否应该显示或隐藏未找到的内容。

还添加了一个检查，以验证您的table-data是可见的，而“未找到”将被删除。

当您选择图标，而不是Talisman的选项，现在找不到了。

​

$(document).ready(function() {
  (function() {
    var filters = {
      itemslot1: null,
      itemslot2: null,
      itemslot3: null
    };

    function updateFilters() {
      $(".table-data")
        .hide()
        .filter(function() {
          var self = $(this),
            result = true;

          Object.keys(filters).forEach(function(filter) {
            if (
              filters[filter] &&
              filters[filter] != "All"
            ) {
              result = result && filters[filter] === self.data(filter);
            }
          });

          return result;

        })

        .show();
    }

    function bindDropdownFilters() {
      var isZero = false;
      Object.keys(filters).forEach(function(filterName) {
        $("#" + filterName + "-filter").on("change", function() {
          filters[filterName] = this.value;

          updateFilters();

          var $table = $('#filter-table'),
            $colLength = $table.find('thead th').length,
            $filteredCount = $table.find('tbody tr:visible').length;

          console.log($filteredCount);
          if ($filteredCount == 0 && !isZero) {
            isZero = true;
            $table.find('tbody').append($("<tr />").addClass("no-result").css({
              "text-align": "center"
            }).append($("<td />").attr("colspan", $colLength).html("Not found.")));
          } else if ($('.table-data').css('display') != 'none') {
            $(".no-result").remove();
            isZero = false;
          }
        });
      });
    }

    bindDropdownFilters();
  })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='table-filters'>
  <select id="itemslot1-filter">
    <option>All</option>
    <option value="Icon">Icon</option>
    <option value="Ring">Ring</option>
    <option value="Waist">Waist</option>
    <option value="Talisman">Talisman</option>
    <option value="Sword Knot">Sword Knot</option>
    <option value="Neck">Neck</option>
  </select>
  <select id="itemslot2-filter">
    <option>All</option>
    <option value="Icon">Icon</option>
    <option value="Ring">Ring</option>
    <option value="Waist">Waist</option>
    <option value="Talisman">Talisman</option>
    <option value="Sword Knot">Sword Knot</option>
    <option value="Neck">Neck</option>
  </select>
  <select id="itemslot3-filter">
    <option>All</option>
    <option value="Icon">Icon</option>
    <option value="Ring">Ring</option>
    <option value="Waist">Waist</option>
    <option value="Talisman">Talisman</option>
    <option value="Sword Knot">Sword Knot</option>
    <option value="Neck">Neck</option>
  </select>
</div>

<table id="filter-table">
  <thead>
    <tr>
      <th>Slot 1</th>
      <th>Slot 2</th>
      <th>Slot 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist">
      <td>Ring</td>
      <td>Neck</td>
      <td>Waist</td>
    </tr>
    <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring">
      <td>Neck</td>
      <td>Waist</td>
      <td>Ring</td>
    </tr>
    <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring">
      <td>Sword Knot</td>
      <td>Neck</td>
      <td>Ring</td>
    </tr>
    <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring">
      <td>Ring</td>
      <td>Ring</td>
      <td>Ring</td>
    </tr>
    <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman">
      <td>Ring</td>
      <td>Ring</td>
      <td>Talisman</td>
    </tr>
  </tbody>
</table>

​