通过包含字符串的数据属性多过滤表行

Question

我有一个表，其中包含三种数据类型的表行：

 <tr class="odd" data-sector="blue red green orange" data-report="earnings industry" data-market="consumer enterprise maratime" role="row"></tr>

• 数据扇区
• 数据报告
• 数据市场

每种数据类型都有一个要过滤的单选检查部分。我可以在其中一个无线电检查部分完成此操作，但不能同时完成这三个部分。

这是一个Jsfiddle，展示了我如何让“部门”部分正常工作，但无法让它们一起工作：

JS：

  $('input[type="radio"]').change(function (e) {

    var sector = $('input[name="sector"]:checked').prop('id') || '';
    var report = $('input[name="report"]:checked').prop('id') || '';
    var market = $('input[name="market"]:checked').prop('id') || '';
    filter(sector)
    e.preventDefault();
  });

  function filter(e) {
      var regex = new RegExp('\\b' + e + '\\b');

      $('#table').find('tr').hide().filter(function () {
          return regex.test($(this).data('sector'))
      }).show();
  }

所以我很迷茫如何让这三者一起工作。

因此，如果有人选择“红色”+“融资”+“航空”，则应该只显示“三”和“六”行。

Answer 1

我在这里建立了一个现场演示：

最好用“indexOf”来测试字符串，而不是正则表达式。

$('input[type="radio"]').change(function(e) {
  var sector = $('input[name="sector"]:checked').prop('id');
  var report = $('input[name="report"]:checked').prop('id');
  var market = $('input[name="market"]:checked').prop('id');
  filter({
    sector,
    report,
    market
  });
  e.preventDefault();
});

function filter(filters) {
  $('#table').find('tr').hide().filter(function() {
    for (var i in filters) {
      if (filters[i] && $(this).data(i).indexOf(filters[i]) === -1) {
        return false;
      }

    }
    return true;
  }).show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: flex;">
  <div style="">
    <p><strong>Sector</strong></p>
    <input type="radio" id="blue" name="sector" />Blue<br>
    <input type="radio" id="red" name="sector" />Red<br>
    <input type="radio" id="green" name="sector" />Green<br>
    <input type="radio" id="orange" name="sector" />Orange<br>
    <input type="radio" id="purple" name="sector" />Purple
  </div>
  <div style="">
    <p><strong>Report Type</strong></p>
    <input type="radio" id="earnings" name="report" />Earnings<br>
    <input type="radio" id="industry" name="report" />Industry<br>
    <input type="radio" id="financing" name="report" />Financing<br>
    <input type="radio" id="capital" name="report" />Capital
  </div>
  <div style="">
    <p><strong>Market</strong></p>
    <input type="radio" id="aviation" name="market" />Aviation<br>
    <input type="radio" id="consumer" name="market" />Consumer<br>
    <input type="radio" id="defense" name="market" />Defense<br>
    <input type="radio" id="enterprise" name="market" />Enterprise<br>
    <input type="radio" id="m2m" name="market" />M2M<br>
    <input type="radio" id="maratime" name="market" />Maratime
  </div>
</div>
<table id="table">
  <tbody>
    <tr class="odd" data-sector="blue red green orange" data-report="earnings industry" data-market="consumer enterprise maratime" role="row">
      <th>Table Row One</th>
    </tr>
    <tr class="even" data-sector="purple red" data-report="earnings capital" data-market="enterprise defense maratime" role="row">
      <th>Table Row Two</th>
    </tr>
    <tr class="odd" data-sector="green red" data-report="financing" data-market="defense" role="row">
      <th>Table Row Three</th>
    </tr>
    <tr class="even" data-sector="blue" data-report="industry financing" data-market="m2m consumer" role="row">
      <th>Table Row Four</th>
    </tr>
    <tr class="odd" data-sector="green orange purple" data-report="earnings" data-market="maratime" role="row">
      <th>Table Row Five</th>
    </tr>
    <tr class="even" data-sector="red" data-report="financing" data-market="aviation maratime" role="row">
      <th>Table Row Six</th>
    </tr>
  </tbody>
</table>