Question

在页面加载时，我试图显示div1 10秒钟，然后将其隐藏，显示div2 3秒钟，然后将其隐藏，然后显示最后一个div3，而不隐藏它。

所以我在CSS中...

#show1, #show2, #show3 {display: none; }

在html中...

<div id="showhide">
<div id="show1">
<h2>Step 1: Checking if your area is eligible...</h2>
</div>
<div id="show2">
<h2>Success!</h2>
</div>
<div id="show3">
<h2>Just need to gather a little more information...</h2>
</div>
</div>

还有一个运行正常的show / hide脚本，但是我不确定如何1）使其不循环和2）为div1和div2的show / hide设置不同的时间间隔。

$(function () {

var counter = 0,
divs = $('#show1, #show2, #show3');

function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.show('fast'); // and show it

counter++;
}; // function to loop through divs and show correct div

showDiv(); // show first div    

setInterval(function () {
showDiv(); // show next div
}, 1 * 1000); // do this every 10 seconds    

});

任何帮助将不胜感激！

Answer 1

在data-nextid="show2" data-showtimeout="10" class="hide-div" style="display:none;"标签中添加了<div>。

data-nextid将显示下一个div的ID。

data-showtimeout将具有当前格的显示时间值。

hide-div类用于将所有此类div设置为在函数调用时隐藏。

style="display:none;"到每个div最初都会隐藏所有div。

已删除CSS #show1, #show2, #show3 {display: none; }

在displayDivWithTimer.apply($('#show1'));内添加了显示第一个div $(document).ready()的初始调用。

function displayDivWithTimer() { 
  $(this).css('display', 'block');
  var timeout = $(this).attr('data-showtimeout');
  var nextid = $(this).attr('data-nextid');
  //console.log("timeout:" + timeout + ", nextid:" + nextid);
  if (timeout && nextid) {
    setTimeout(() => {
      $('.hide-div').css('display', 'none');
      displayDivWithTimer.apply($('#' + nextid));
    }, parseInt(timeout) * 1000);
  }  
}

$(document).ready(function() {
    displayDivWithTimer.apply($('#show1'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="showhide">
  <div data-nextid="show2" data-showtimeout="10" id="show1" class="hide-div" style="display:none;">
    <h2>Step 1: Checking if your area is eligible...</h2>
  </div>
  <div data-nextid="show3" data-showtimeout="3" id="show2" class="hide-div" style="display:none;">
    <h2>Success!</h2>
  </div>
  <div id="show3" class="hide-div" style="display:none;">
    <h2>Just need to gather a little more information...</h2>
  </div>  
</div>

X秒钟后无循环显示/隐藏Divs系列

1 个答案: