jQuery を使用して特定の時間間隔で Div を表示および非表示にするにはどうすればよいですか?

jQuery を使用して事前定義された時間間隔で Div を表示および非表示にする

Web 開発では、特定の時間間隔で要素を動的に表示または非表示にするのが一般的です。時間間隔。強力な JavaScript ライブラリである jQuery は、このようなタスクを容易にする setInterval などのメソッドの配列を提供します。

質問

この機能の実装方法を紹介するために、次のことを考えてみましょう。一連の div を 10 秒の間隔で順番に公開する必要があるシナリオ

解決策

これを達成するための理想的なアプローチは、JavaScript の setInterval 関数を利用することです。表示された div を追跡するカウンターを開始し、次のロジックを実装します。

• 10 秒ごとに showDiv 関数を実行するタイマーを設定します。
• showDiv 内関数を使用する場合は、カウンター値をチェックして、最初の実行中でないことを確認してください。
• カウンターが最初の反復中でない場合は、すべての div を非表示にし、現在のカウンタに対応する 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 中国語 Web サイトの他の関連記事を参照してください。