切换以显示 .not() 隐藏元素答案

【问题标题】：toggle to show .not() hidden elements切换以显示 .not() 隐藏元素
【发布时间】：2017-08-05 14:00:28
【问题描述】：

我有一个包含一些事件的表，可见行有一个 new 类，所有过去的事件都用 `:not' 函数隐藏。

我想制作一个带有onClick 功能的按钮，使用户能够查看没有new 类的过去事件。

$(document).ready(function() {

  $('tbody tr:not(.new)').hide();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<html>

<tbody>
  <table style="width:100%" cellpadding="8px">

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

  </table>
</tbody>

</html>

【问题讨论】：

你需要什么帮助，你有什么问题？当你尝试时，你在哪里卡住了？
@David Thomas 我的实际代码有比这更多的 id 和类，有一些控制台错误 re:functions 未定义但现在一切正常！

标签： javascript jquery toggle hide show

【解决方案1】：

只需添加按钮并单击显示所有行并更改按钮的文本。

$(document).ready(function() {


  $('tbody tr:not(.new)').hide();
  
  $('#show_past_event').click(function(){
    if($(this).hasClass("all_events"))
    {
      $('tbody tr:not(.new)').hide();
      $(this).text("Show Past Event");
      $('#show_past_event').removeClass("all_events");
    }
    else
    {
      $('tbody tr').show();
      $(this).text("Hide Past Event");
      $('#show_past_event').addClass("all_events");
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<html>

<tbody>

   <button id="show_past_event">Show Past Event</button>

  <table style="width:100%" cellpadding="8px">

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

  </table>
</tbody>

</html>

【讨论】：

你可以通过解释你的答案让它变得更好

【解决方案2】：

我只是翻转了你最初在做什么的感觉，并添加了一个按钮来激活它。

$(document).ready(function() {

  $('tbody tr:not(.new)').hide();
  
  $('button').click( function() {
    $('tbody tr:not(.new)').show();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<tbody>
  <table style="width:100%" cellpadding="8px">

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

  </table>
</tbody>
<button>Show Old Events</button>
</html>

【讨论】：

【解决方案3】：

假设您想用旧事件替换新事件，最好的方法是在单击按钮时显示所有元素，然后隐藏new 元素。

$(document).ready(function() {
  $('tbody tr:not(.new)').hide();
});

function showOld() {
  $('tbody tr').show();
  $('tbody tr.new').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showOld()">Show Old Events</button>

<tbody>
  <table style="width:100%" cellpadding="8px">
    <tr>
      <td>old event</td>
    </tr>
    <tr>
      <td>old event</td>
    </tr>
    <tr>
      <td>old event</td>
    </tr>
    <tr class="new">
      <td>new event</td>
    </tr>
    <tr class="new">
      <td>new event</td>
    </tr>
    <tr class="new">
      <td>new event</td>
    </tr>
  </table>
</tbody>

要显示除旧元素之外的新元素，只需删除：

$('tbody tr.new').hide();

希望这会有所帮助！ :)

【讨论】：

不知道 .show() 函数会起作用。我以为我必须专门针对未分类的行，否则它们将在 jquery 中被忽略！谢谢！

【解决方案4】：

看起来很琐碎，这是你所期望的吗？

$(document).ready(function() {
  $('tbody tr:not(.new)').hide();
});

$('#btn').click(function(){
  $('tbody tr').show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<html>

<tbody>
  <table style="width:100%" cellpadding="8px">

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr>
      <td>old event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

    <tr class="new">
      <td>new event</td>
    </tr>

  </table>
</tbody>

<button id='btn'>click</button>

</html>

【讨论】：