如何使用 jQuery 在特定时间间隔显示和隐藏 Div？

使用 jQuery 以预定义的时间间隔显示和隐藏 Div

在 Web 开发中，在特定位置动态显示或隐藏元素是一种常见的做法时间间隔。 jQuery 是一个强大的 JavaScript 库，提供了一系列方法，包括 setInterval 来促进此类任务。

问题

为了展示如何实现此功能，让我们考虑一个我们需要按顺序揭开一系列 div 的场景，它们之间有 10 秒的间隔。

解决方案

实现此目的的理想方法是利用 JavaScript setInterval 函数。我们将启动一个计数器来跟踪显示的 div 并实现以下逻辑：

• 设置一个计时器，每 10 秒执行一次 showDiv 函数。
• 在 showDiv 内函数，检查计数器值以确保它不是在初始执行时。
• 如果计数器不是在第一次迭代，则隐藏所有 div 和显示与当前计数器对应的那个。
• 增加计数器，如果到达最后一个 div，则将其重置为零。

通过采用此方法，我们可以显示每个div 以 10 秒为间隔，如下面链接的工作示例所示。

工作示例此处 - 将/edit添加到URL以使用代码

提供的代码片段利用setInterval函数定期触发div的显示。下面是代码的细分：

setInterval(showDiv, 10000); // Set a 10-second interval to execute showDiv

var counter = 0; // Initialize a counter to track the displayed div

function showDiv() {
  if (counter == 0) { // Skip the first iteration
    counter++;
    return;
  }

  $('div', '#container') // Select all divs within the container element
    .stop() // Halt any ongoing animations
    .hide() // Conceal all divs
    .filter(function() { // Filter and show the div corresponding to the current counter
      return this.id.match('div' + counter);
    })
    .show('fast');
  counter == 3 ? counter = 0 : counter++; // Increment the counter and reset it if necessary
}

请记住，有效实现此功能的关键在于理解 setInterval 函数的作用以及以预定义的时间间隔显示和隐藏 div 的随附逻辑。请随意探索提供的工作示例，以进一步增强您对此技术的理解。

以上是如何使用 jQuery 在特定时间间隔显示和隐藏 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！