Saya memiliki daftar dengan beberapa elemen pemberitahuan penjualan palsu. Mereka semua memiliki kelas yang sama. Dengan kode yang saya dapatkan, semua notifikasi ditampilkan secara bersamaan tetapi saya hanya perlu menampilkan 1 notifikasi acak setiap kali. Bagaimana saya bisa melakukannya?

Ini kode saya saat ini:

PHP untuk menghasilkan elemen:

$notification .= '
<section class="custom-social-proof">
  <div class="custom-notification">';
    // Get fake sale notification info
    $specarticles = '
    SELECT
    c.alias as content_alias,
    c.title as content_title,
    c.catid,
    c.state,
    c.featured,
    c.images,
    ca.id,
    ca.published,
    ca.title as cat_title,
    ca.alias as cat_alias
    FROM snm_content c
    LEFT JOIN snm_categories ca
    ON c.catid = ca.id
    WHERE c.featured = 1
    AND c.state = 1
    AND ca.published = 1';
    $specarticlescon = $conn->query($specarticles);
    while($specarticles = $specarticlescon->fetch_assoc()){

        $imagesjson = json_decode($specarticles['images']);

        if(!empty($imagesjson->image_intro)){
            $image = 'https://website.nl/cms/'.$imagesjson->image_intro;
        }else{
            $image = '';
        }

        $notification .= '
        <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
                <img src="'.$image.'">
            </div>
            <div class="custom-notification-content-wrapper">
                <p class="custom-notification-content">
                    Piet De Graaf - Spijkenisse<br>reserveerde <a href="'.$specarticles['cat_alias'].'/'.$specarticles['content_alias'].'">'.$specarticles['content_title'].'</a>
                    <small>vandaag</small>
                </p>
            </div>
        </div>';
    }
    $notification .= '
        <div class="custom-close"></div>
    </div>
</section>';

echo $notification;

Dan jquery saya:

setInterval(function(){ tpj(".custom-social-proof").stop().slideToggle('slow'); }, 8000);
 tpj(".custom-close").click(function() {
   tpj(".custom-social-proof").stop().slideToggle('slow');
 });

Saya menemukan Anda bisa mendapatkan sesuatu yang acak dengan eq. Jadi saya mencoba yang berikut ini:

var len = tpj(".custom-social-proof").length;
var random = Math.floor( Math.random() * len ) + 1;
setInterval(function(){ tpj(".custom-social-proof").eq(random).stop().slideToggle('slow'); }, 8000);
 tpj(".custom-close").click(function() {
   tpj(".custom-social-proof").stop().slideToggle('slow');
 });

Tetapi ini menghentikan pemberitahuan agar tidak muncul sepenuhnya. Apa yang saya lakukan salah?

2
twan 22 Oktober 2019, 11:05

1 menjawab

Jawaban Terbaik

Anda harus melewati acak di dalam setInterval dan menyembunyikan semua elemen kelas yang sama toggle.

Silakan coba. Sekarang Anda perlu mendeteksi apakah elemen sudah toggle.

var len = $(".custom-social-proof").length;
var random = 0;

setInterval(function(){ 
  random = Math.floor( Math.random() * len ) ;
  $(".custom-social-proof").hide('slow');
  $(".custom-social-proof").eq(random).stop().slideToggle('slow'); 
}, 1000);
.custom-social-proof{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="custom-social-proof">1</section>
<section class="custom-social-proof">2</section>
<section class="custom-social-proof">3</section>
<section class="custom-social-proof">4</section>
<section class="custom-social-proof">5</section>
2
P. Frank 22 Oktober 2019, 08:47