Toastr多个div

Question

我有多个包含自定义css toastr通知的div， 我需要帮助的是每次页面加载或使用toastr通过代码显示随机div如何以相同的方式执行它，任何帮助被赞赏css或js，这是我一直在尝试但没有运气，和我也尝试过使用math（）但它要么同时显示所有div还是不工作......无论如何它可以选择特定的div而只显示他而隐藏其他div那里？

＆＃13;

＆＃13;

#toastr {
  font-size: 21px;
  text-align: center;
  transition: opacity 1s 1s;
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  z-index: 1;
  bottom: 12px;
  left: 12px;
  font-size: 17px;
  animation: fadeins 5s linear forwards;
  opacity: 0;
}

#toastr a {
  color: white;
  text-decoration: none;
}

#toastr>div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 15px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
  opacity: 1;
}

.toastr-success {
  background-color: #51A351;
}

@keyframes fadeins {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    bottom: -5px;
  }
  to {
    opacity: 1;
    bottom: 12px;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
    bottom: 12px;
  }
  to {
    opacity: 0;
    bottom: 0;
  }
}

＆＃13;

<div class="views-row views-row-2 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message1</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message2</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看到你有一个名为random-popup的类，你可以将它们设置为最初显示为none，然后使用另一个类可能被称为active，将显示设置为block ..

.random-popup {
  display: none;
}
.random-popup.active {
  display: block;
}

然后使用一些简单的Javascript，通过添加活动类来设置其中一个随机可见..

var popups = document.querySelectorAll(".random-popup");
popups[Math.trunc(Math.random() * popups.length)].classList.add("active");

例如..

var popups = document.querySelectorAll(".random-popup");

popups[Math.trunc(Math.random() * popups.length)]
  .classList.add("active");

#toastr {
  font-size: 21px;
  text-align: center;
  transition: opacity 1s 1s;
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  z-index: 1;
  bottom: 12px;
  left: 12px;
  font-size: 17px;
  animation: fadeins 5s linear forwards;
  opacity: 0;
}

#toastr a {
  color: white;
  text-decoration: none;
}

#toastr>div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 15px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
  opacity: 1;
}

.toastr-success {
  background-color: #51A351;
}

@keyframes fadeins {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    bottom: -5px;
  }
  to {
    opacity: 1;
    bottom: 12px;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
    bottom: 12px;
  }
  to {
    opacity: 0;
    bottom: 0;
  }
}

.random-popup {
  display: none;
}

.random-popup.active {
  display: block;
}

<div class="views-row views-row-2 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message1</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message2</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>