在同一按钮上显示隐藏元素单击

Question

我有以下示例code：

代码HTML：

<ul>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item hidden"> item 1 </li>
  <li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>

代码CSS：

.hidden {
  display: none;
}
.visible {
  display: block;
}

CODE JS：

$('.button').on('click', function (e) {
  var item = $('.item');
  item.removeClass('hidden'); 
});

我想将类.visible添加到以前具有.hidden类的元素中。基本上，我想在下次单击时再次隐藏项目，然后切换类。

如何隐藏最后两个项目？

谢谢！

Answer 1

您需要使用.toggle()

 $('.button').on('click', function (e) {
      $('.hidden').toggle('visible'); 
});

Answer 2

尝试此操作，不需要CSS，只需.toggle（）即可。

$('.button').on('click', function (e) {
  $('.hidden').toggle(); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item hidden"> item 1 </li>
  <li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>

Answer 3

或者，您也可以使用以下方法：

CSS

.hidden {
 display:none;
}

JQuery

$('.button').on('click', function (e) {
      $('#anyElement').toggleClass('hidden');
});

Answer 4

您需要使用switchClass删除现有的并添加第二个。

Answer 5

或者，您可以单击按钮并遍历每个元素，然后删除/添加相关的类。

$("button").click(function(){
     $("li").each(function(){
         let $this = $(this);
         if($this.hasClass('hidden')){
    	   $this.removeClass("hidden").addClass("visible");
         } else if($this.hasClass('visible')){
    	   $this.removeClass("visible").addClass("hidden");
         }
      })
})

.hidden {
  display: none;
}
.visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item hidden"> item 1 </li>
  <li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>