Как новичок в 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');
         }
        })
    });

Любой совет приветствуется.

Спасибо

1
Damir 24 Сен 2018 в 18:21

2 ответа

Лучший ответ

Это можно сделать, просто используя 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>
1
Zakaria Acharki 24 Сен 2018 в 15:49

Есть миллион способов добиться этого ... По сути, вам нужен способ определить, какую «популярность» вы хотите отображать, очевидно, лол.

Вот простая ручка, показывающая самый простой способ сделать это. Он использует переменную для подсчета каждого нажатия кнопки div и используется в качестве индекса для определения того, какой «всплывающий» элемент отображать.

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();
});
0
Jawsh 24 Сен 2018 в 15:32