如何仅显示包含jQuery类的数组的元素

Question

我有一些带有各种选项的元素，用户可以选择隐藏和显示表格中的元素。

这个选择'框是我所说的选择器。文件中有许多这些。

<div class="elegant_filters">
  <select multiple class="location">
   <option value="red">Red</option>
   <option value="green">Green</option>
   <option value="blue">Blue</option>
   <option value="orange">Orange</option>
   <option value="black">Black</option>
  </select>
</div>

这是包含数据的表。

<table>
  <tr class="red blue"><td>Some Data</td></tr>
  <tr class="red green"><td>Some Data</td></tr>
  <tr class="green blue"><td>Some Data</td></tr>
  <tr class="black blue"><td>Some Data</td></tr>
  <tr class="red orange"><td>Some Data</td></tr>
</table>

我使用这个JS在点击时创建一个类名数组，以隐藏和显示这些类的行。

//For the primary filters
jQuery('.elegant_filters option').on('click', function(e){

    jQuery(this).toggleClass('selected');

    var filters = [];
    jQuery('.elegant_filters option.selected').each(function(){
        var val = jQuery(this).val();
        filters.push('.'+val);          
    });

    if (jQuery(filters).length < 1) {
        jQuery('.elegant_list_properties tr.propertyrow').show();
    } else {
        jQuery('.elegant_list_properties tr.propertyrow').hide();
        jQuery(filters.join(', ')).show();
    }       

})

单击选项时生成的数组是[.red，.green]

当前结果：

如果我单击“红色”和“绿色”选项，则包含这些类的所有行将一起显示或单独显示，并且将删除那些不包含这些类的行。

要求的结果：

如果我单击“红色”和“绿色”选项，则只显示包含BOTH类的行，并且将删除不包含BOTH类的行。

Answer 1

更换

jQuery(filters.join(', ')).show();

同

jQuery(filters.join('')).show();

如果类名一起没有逗号，则确保与选择器匹配的项匹配选择器中的所有类，而不仅仅是其中一个类

Answer 2

我认为我对您的代码所做的唯一实质性更改是加入没有分隔符的过滤器，这可以确保该行包含要显示的所有类。

当我制作片段时，我确实重新组织了一些代码。

jQuery('.elegant_filters option').on('click', function(e) {
  
  jQuery(this).toggleClass('selected');

  var filters = [];
  jQuery('.elegant_filters option.selected').each(function() {
    var val = jQuery(this).val();
    filters.push('.' + val);
  });
  //- not all but this -//
  //  if (jQuery(filters).length < 1) {
  //    jQuery('.elegant_list_properties tr.propertyrow').show();
  //  } else {
  //    jQuery('.elegant_list_properties tr.propertyrow').hide();
  //    jQuery(filters.join(', ')).show();
  //  }
  hideAllBut(filters);
});

function hideAllBut(selectors) {
  $("table tr").hide(); //hide all
  $("table tr" + selectors.join('')).show(); //show the matching ones
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elegant_filters">
  <select multiple class="location">
   <option value="red">Red</option>
   <option value="green">Green</option>
   <option value="blue">Blue</option>
   <option value="orange">Orange</option>
   <option value="black">Black</option>
  </select> Here is the table that contains the data.
</div>
<table>
  <tr class="red blue">
    <td>red blue</td>
  </tr>
  <tr class="red green">
    <td>red green</td>
  </tr>
  <tr class="green blue">
    <td>green blue</td>
  </tr>
  <tr class="black blue">
    <td>black blue</td>
  </tr>
  <tr class="red orange">
    <td>red orange</td>
  </tr>
</table>

考虑：

您可能想要考虑处理change的select函数而不是click的option然后迭代.elegant_filters option:selected这将删除您对所选类的需要并允许该部分由select元素处理。

jQuery('.elegant_filters select').on('change', function() {
  hideAllBut($.map($(this).find("option:selected"), function(option) {
    return "." + $(option).val(); //build the array of selected options as classes
  }));
});

function hideAllBut(selectors) {
  $("table tr").hide(); //hide all
  $("table tr" + selectors.join('')).show(); //show the matching ones
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elegant_filters">
  <select multiple class="location">
   <option value="red">Red</option>
   <option value="green">Green</option>
   <option value="blue">Blue</option>
   <option value="orange">Orange</option>
   <option value="black">Black</option>
  </select> Here is the table that contains the data.
</div>
<table>
  <tr class="red blue">
    <td>red blue</td>
  </tr>
  <tr class="red green">
    <td>red green</td>
  </tr>
  <tr class="green blue">
    <td>green blue</td>
  </tr>
  <tr class="black blue">
    <td>black blue</td>
  </tr>
  <tr class="red orange">
    <td>red orange</td>
  </tr>
</table>