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

可以在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();
});

用不同的类号jQuery打开一个带有随机值的随机弹出div

2 个答案: