包含字符串的data-attr的多過濾器表行

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”來測試字符串，而不要使用regexp。

 $('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>