Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menunjukkan dan Menyembunyikan Div pada Selang Masa Tertentu?

Paparkan dan Sembunyikan Div pada Selang Masa Dipratentukan Menggunakan jQuery

Dalam pembangunan web, amalan biasa untuk menunjukkan atau menyembunyikan elemen secara dinamik pada tertentu selang masa. jQuery, perpustakaan JavaScript yang berkuasa, menyediakan pelbagai kaedah termasuk setInterval yang memudahkan tugasan tersebut.

Persoalannya

Untuk mempamerkan cara melaksanakan fungsi ini, mari kita pertimbangkan senario di mana kita perlu mendedahkan satu siri div secara berurutan, dengan selang 10 saat antara mereka.

Penyelesaian

Pendekatan yang ideal untuk mencapainya ialah dengan menggunakan fungsi setInterval JavaScript. Kami akan memulakan pembilang untuk menjejaki div yang dipaparkan dan melaksanakan logik berikut:

• Sediakan pemasa yang melaksanakan fungsi showDiv setiap 10 saat.
• Dalam showDiv fungsi, semak nilai pembilang untuk memastikan ia bukan pada pelaksanaan awal.
• Jika pembilang tidak pada lelaran pertamanya, sembunyikan semua div dan dedahkan yang sepadan dengan pembilang semasa.
• Naikkan pembilang, dan jika ia mencapai div terakhir, tetapkan semula kepada sifar.

Dengan menggunakan kaedah ini, kami boleh menunjukkan setiap div pada selang 10 saat, seperti yang ditunjukkan dalam contoh kerja yang dipautkan di bawah.

Contoh Berfungsi di sini - tambahkan /edit pada URL untuk bermain dengan kod

The dengan syarat coretan kod memanfaatkan fungsi setInterval untuk mencetuskan paparan div secara berkala. Berikut ialah pecahan kod:

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
}

Ingat, kunci untuk melaksanakan fungsi ini dengan berkesan terletak pada memahami peranan fungsi setInterval dan logik yang disertakan untuk menunjukkan dan menyembunyikan div pada selang masa yang telah ditetapkan. Sila terokai contoh kerja yang disediakan untuk meningkatkan lagi pemahaman anda tentang teknik ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menunjukkan dan Menyembunyikan Div pada Selang Masa Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!