使用不同的類號 jQuery 隨機打開一個隨機彈出 div

Question

作為一直以來的 JS 初學者，我試圖在每次單擊按鈕時顯示不同的彈出窗口。

嘗試了很多不同的東西，但到目前為止沒有任何效果......

每個彈出 div 都有一個類“pop”+一個數字，所以“pop1”，“pop2”......點擊時，我想以隨機順序顯示不同的彈出窗口。

HTML：

<div class="button">
    <img class="" src="images/button.png">
</div>

<div class="pop1 hide">
<div class="success-msg">
    <span class="close">×</span>
        <div class="success-inner">
            <div class="popup-info-text">
                <h2>Title</h2>
                <p>Hello World</p>
            </div>
            <div class="play-btn">
                Redeem it now
            </div>
        </div>
</div>
</div> <!-- end pop1 -->
<div class="pop2 hide">
<div class="success-msg">
    <span class="close">×</span>
        <div class="success-inner">
            <div class="popup-info-text">
                <h2>Title</h2>
                <p>Hello World</p>
            </div>
            <div class="play-btn">
                Redeem it now
            </div>
        </div>
</div>
</div> <!-- end pop2 -->

到目前為止，我的 jQuery 顯示/隱藏彈出窗口：

   //show popup on click with a delay
    setTimeout(function(){
    $(".pop").removeClass("hide");
        $(".pop").addClass("show");
        $(".pop").show();
        $(".success-msg").show();
    }, 3800);   

嘗試添加新的 jQuery 代碼以通過允許不同的彈出顯示來隨機化彈出：

$('.button ').click(function () {
        class_is=$(this).attr('class').match(/block-[0-2]/,'');

        $('.pop div').each(function() {
         if($(this).attr('class').indexOf(class_is)!==-1) {
       $(this).toggleClass('show');
                $(this).siblings().removeClass('show');
         }
        })
    });

歡迎提出任何建議。

謝謝

Answer 1

這可以在rand()的幫助下使用removeClass()/addClass() rand()來生成隨機數，例如：

簡單的解決方案：

 $('.button').click(function() { var global_selector = $("[class^='pop_']"); var random = Math.floor(Math.random() * global_selector.length) + 1; global_selector.addClass("hide").removeClass("show"); $(".pop_" + random).removeClass("hide").addClass("show"); });

 .info-msg, .success-msg, .warning-msg, .error-msg { margin: 10px 0; padding: 10px; border-radius: 3px 3px 3px 3px; } .info-msg { color: #059; background-color: #BEF; } .success-msg { color: #270; background-color: #DFF2BF; } .warning-msg { color: #9F6000; background-color: #FEEFB3; } .error-msg { color: #D8000C; background-color: #FFBABA; } /* Just for CodePen styling - don't include if you copy paste */ html { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 25px; } body { width: 640px; } .hide { display: none; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="button">CLICK ME</div> <div class="pop_1 hide"> <div class="success-msg"> <span class="close">×</span> <div class="success-inner"> <div class="popup-info-text"> <h2>Title</h2> <p>Hello World</p> </div> <div class="play-btn"> Redeem it now 1 </div> </div> </div> </div> <!-- end pop1 --> <div class="pop_2 hide"> <div class="success-msg"> <span class="close">×</span> <div class="success-inner"> <div class="popup-info-text"> <h2>Title</h2> <p>Hello World</p> </div> <div class="play-btn"> Redeem it now 2 </div> </div> </div> </div> <div class="pop_3 hide"> <div class="success-msg"> <span class="close">×</span> <div class="success-inner"> <div class="popup-info-text"> <h2>Title</h2> <p>Hello World</p> </div> <div class="play-btn"> Redeem it now 3 </div> </div> </div> </div>

非連續隨機解決方案（避免連續隨機數）：

 var random = 1; $('.button').click(function() { var global_selector = $("[class^='pop_']"); random = generateNonSuccessiveRand(1, global_selector.length, random); global_selector.addClass("hide").removeClass("show"); $(".pop_" + random).removeClass("hide").addClass("show"); }); function generateNonSuccessiveRand(min, max, previous) { var rand = Math.floor(Math.random() * max) + min; while (rand === previous) { rand = Math.floor(Math.random() * max) + min } return rand; }

 .info-msg, .success-msg, .warning-msg, .error-msg { margin: 10px 0; padding: 10px; border-radius: 3px 3px 3px 3px; } .info-msg { color: #059; background-color: #BEF; } .success-msg { color: #270; background-color: #DFF2BF; } .warning-msg { color: #9F6000; background-color: #FEEFB3; } .error-msg { color: #D8000C; background-color: #FFBABA; } /* Just for CodePen styling - don't include if you copy paste */ html { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 25px; } body { width: 640px; } .hide { display: none; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="button">CLICK ME</div> <div class="pop_1 hide"> <div class="error-msg"> <span class="close">×</span> <div class="success-inner"> <div class="popup-info-text"> <h2>Title</h2> <p>Hello World</p> </div> <div class="play-btn"> Redeem it now 1 </div> </div> </div> </div> <!-- end pop1 --> <div class="pop_2 hide"> <div class="success-msg"> <span class="close">×</span> <div class="success-inner"> <div class="popup-info-text"> <h2>Title</h2> <p>Hello World</p> </div> <div class="play-btn"> Redeem it now 2 </div> </div> </div> </div> <div class="pop_3 hide"> <div class="info-msg"> <span class="close">×</span> <div class="success-inner"> <div class="popup-info-text"> <h2>Title</h2> <p>Hello World</p> </div> <div class="play-btn"> Redeem it now 3 </div> </div> </div> </div>

Answer 2

有一百萬種方法可以實現這一點...基本上，您需要一種方法來確定要顯示哪個“流行音樂”，顯然大聲笑。

這是一個簡單的筆，展示了最基本的方法。 它使用一個變量來記錄每次單擊按鈕 div 的次數，並將其用作索引來確定要顯示的“pop”。

https://codepen.io/jthomas077/pen/BOemQQ

var popCntr = 0;

$('.button').on('click touchend', function (e) 
{
    $('.pop').hide().eq(popCntr).show();

    popCntr++;

    $('.pop-cntr').html(popCntr);

    e.preventDefault();
});