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类的行，并且不会删除那些不会删除的行。

Answer 1

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

当我制作片段时，我确实重新整理了代码。

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的{{1}}，然后迭代option这将删除您对所选类的需求，并允许该部分由select元素处理。

.elegant_filters option:selected

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
}

Answer 2

替换

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

与

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

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

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

2 个答案: