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

Question

我有一个 table 和一些事件，可见行有一个 new class 并且所有过去的事件都用 `:not' 函数隐藏。

我想制作一个具有 onClick 功能的按钮，使用户能够查看没有 new class.

的过去事件

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

Answer 1

看起来很琐碎，是您期望的吗？

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

Answer 2

假设您想用旧事件替换新事件，最好的方法是显示所有单击按钮上的元素，然后隐藏 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();

希望对您有所帮助！ :)

Answer 3

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

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

Answer 4

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

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

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

toggle to show .not() hidden elements

javascript

jquery

show

toggle

hide