Question

我有这个HTML：

<div class="all">
  <div class="single">A</div>
  <div class="single">B</div>
  <div class="single">C</div>
</div>

<div class="all">
  <div class="single">A</div>
  <div class="single">B</div>
  <div class="single">C</div>
</div>

我想在页面加载上运行一些JavaScript / jQuery，在每个“all”div中显示一个随机的“单个”div。如果我使用代码found here，其中一个“单”div显示在两个“所有”div之间，因为“单个”div出现在每个“all”div中。

var random = Math.floor(Math.random() * $('.single').length);
$('.single').hide().eq(random).show();

我试过并且没有编写某种循环来循环遍历“all”的所有实例并揭示其中一个“单”div，但无济于事，因为我的JS技能非常差。

Answer 1

您可以在$('.all')集合的每个成员上调用您的代码：

$('.all').each(function() {
  var random = Math.floor(Math.random() * $('.single', this).length);
  $('.single', this).hide().eq(random).show();
});

.all {
  margin-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">
  <div class="single">A</div>
  <div class="single">B</div>
  <div class="single">C</div>
</div>

<div class="all">
  <div class="single">A</div>
  <div class="single">B</div>
  <div class="single">C</div>
</div>

JS：隐藏随机元素

1 个答案: