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

Im使用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>

---

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

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

检查

---

你能发布一个有效的代码片段吗？好的，我试图简化我的代码，因为它非常复杂，但我会设置一个小提琴。点击过滤器中的全景海景和卫士。您将了解我的意思。单击全景海景，然后单击Giardian，您希望看到什么？单击全景海景psv=隐藏类名为全景海景的行。单击Guardian=隐藏类名为Guardian的行。问题，当你点击Guardian时，你是否看到显示的附加行，JS将psv行切换回原来的位置，而不是将其隐藏。对不起，我用鼠标点击复制粘贴。无论哪种方式，当我再次单击按钮时，您的解决方案都不会显示行。隐藏它们。如果我单击全景海景，然后单击守卫，然后单击全景海景，你会怎么想？基本上，任何红色背景的按钮都会隐藏具有相同类别的对应行。所以，如果PSV和G都是红色的，则不会显示任何一个类的行。如果我单击PSV，然后单击G，然后单击PSV=所有要显示PSV的行，除非它们也包含G类。有意义吗？更新了小提琴。检查了你的小提琴。如果我单击PSV，它会隐藏，但如果我再次单击，它不会显示。这就是为什么我尝试使用切换。

<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>

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();

});

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

});