一个一个隐藏显示div

Question

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

<div class="section-container">      
    <div id="sec_1" class="section visible">1</div> <!-- Should be visible always -->
    <div id="sec_2" class="section hidden">2</div>
    <div id="sec_3" class="section hidden">3</div>
    <div id="sec_4" class="section hidden">4</div>
    <div id="sec_5" class="section hidden">5</div>
</div>

<button type="button" id="show">Show<button>
<button type="button"  id="hide">Hide<button>

jQuery(document).ready(function (){
   jQuery('#hide').click(function(){
     //Code
   });
   jQuery('#show').click(function(){
     //Code 
   });
});

如何逐一显示 .section div，即第二个 .section 在单击显示按钮时变为可见，依此类推，但是一旦单击隐藏按钮，最后可见 .section div 应该被隐藏。但首先 .section div 永远不应该隐藏，它应该始终可见。

Answer 1

使用属性选择器 [] 获取 ID 以 ^= 开头的 ID 元素，并使用 .slice(1)

忽略检索到的集合中的第一个元素

$("[id^='sec_']").slice(1)

而不是通过 .filter() 方法结合 .first() 和 .last()

来使用 :hidden 和 :visible 选择器

jQuery(function ($) { // DOM ready and $ alias secured

  var $sec = $("[id^='sec_']").slice(1); // Get all but first 

  $('#hide').click(function(){
    $sec.filter(":visible").last().addClass("hidden");
  });
   
  $('#show').click(function(){
    $sec.filter(":hidden").first().removeClass("hidden");
  });
   
});

/* why you want to use .visible? :) */
.hidden{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show">SHOW</button>
<button id="hide">HIDE</button>

<div class="section-container">      
    <div id="sec_1" class="section">1</div>
    <div id="sec_2" class="section hidden">2</div>
    <div id="sec_3" class="section hidden">3</div>
    <div id="sec_4" class="section hidden">4</div>
    <div id="sec_5" class="section hidden">5</div>
</div>

http://api.jquery.com/filter/
https://api.jquery.com/hidden-selector/
https://api.jquery.com/visible-selector/

Answer 2

这是一个示例，可能会对您有所帮助

https://jsfiddle.net/qss1z141/

$("#show").click(function(){
$("#2").removeClass("hidden").addClass("visible");
});
$("#hide").click(function(){
$("#2").removeClass("visible").addClass("hidden");
});

一个一个隐藏显示div

Hide show divs one by one

jquery

show

hide