Toastr多重div

Question

我有多个包含自定义css toastr通知的div，我需要帮助的是每次加载页面时显示随机的div，或者通过代码使用toastr --甚至是如何用相同的方式来实现它，任何帮助都会受到css或js的赞赏，这是我一直在尝试的，但没有运气，而且我也尝试过使用数学()，但是它要么同时显示所有的div，要么不工作……它是否可以选择特定的div并且只显示给他看，同时隐藏其他的div呢？

​

#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;
  }
}

<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>

​

Answer 1

由于您有一个名为随机弹出的类，您可以将它们设置为最初没有显示，然后使用另一个类可能称为active，将显示设置为块。

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

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

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>

​