Question

我使用jQuery和datatables在表中创建属性列表。我还有一排属性功能按钮，我希望根据用户点击显示和隐藏列表中的属性。

例如，这是我的功能过滤器。我用来切换下面属性表中tr元素的简单按钮行：

<div>
  <span class="button" id="pool">Pool</span>
  <span class="button" id="bar">Bar</span>
  <span class="button" id="club">Club</span>
  <span class="button" id="beach">Beach</span>
</div>

这是属性表。

<table>
  <tr class="pool bar">
    <td>some info</td>
  </tr>
  <tr class="pool">
    <td>some info</td>
  </tr>
  <tr class="club bar">
    <td>some info</td>
  </tr>
</table>

使用以下脚本。 1.添加.buttonSelected到span以更改背景颜色。 2.如果我单击span＃pool以隐藏具有池的属性（tr.pool），然后单击span #bar以隐藏带有栏的行（tr.bar），这只会再次切换tr.pool。

jQuery('.features_toggle span.button').on('click',function(){

    var feature = jQuery(this).attr('id');

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

    jQuery('.elegant_list_properties tr.'+feature).toggle();

});

即使其他功能被切换，我也需要能够隐藏行。

Answer 1

您需要保留所选按钮的列表，以便在每次单击任何按钮时首先显示所有tr并隐藏所选择的按钮。

检查fiddle here

jQuery('.features_toggle span.button').on('click', function() {

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

  var allFeature = [];
  // Get a list of button ids which are selected.
  jQuery(".features_toggle span.button.buttonSelected").each(function() {
    var id = this.id;
    // make a selector friendly string
    allFeature.push(".elegant_list_properties tr." + this.id);
  });


  jQuery('.elegant_list_properties tr').show();
  jQuery(allFeature.join(", ")).hide(); // join will make comma separated selector

});

使用.toggle（）有条件地隐藏和显示。

1 个答案: