javascript - 使用 jQuery 显示没有特定类的随机 div

Question

我有一个动态列表，我将它显示在 div 中，如下所示

<div class="cards card1">       
  <div class="front">
    <p>Front 1</p>
  </div>
  <div class="back1" style="display: none">
    <p>Back 1</p>
  </div>
</div>

<div class="cards card2" style="display: none">     
  <div class="front">
    <p>Front 2</p>
  </div>
  <div class="back2" style="display: none">
    <p>Back 2</p>
  </div>
</div>

<div class="cards card3" style="display: none">     
  <div class="front">
    <p>Front 3</p>
  </div>
  <div class="back3" style="display: none">
    <p>Back 3</p>
  </div>
</div>

现在，当页面加载时，它只显示第一个主 div (card1)。我有一个名为“显示”的按钮。当我点击它时，它使用 jQuery 显示第一个主 div 的第二个 subdiv (back1)。它还向名为“visited”的主 div(card1) 添加了一个类。

还有一个名为“下一步”的按钮。现在我要做的是，当我单击“下一步”按钮时，我想随机播放剩余的 div(card2、card3)并随机显示这两个 div 中的 div。在洗牌期间，它应该只洗牌没有那个“访问过”类的 div。

假设我点击了第一个 div 的显示按钮。 'visited' 类将添加到该 div (card1)。现在剩下两个 div 没有类“已访问”。因此，当我单击“下一步”按钮时，它应该只显示 card2 或 card3 div 而不是 card1，因为 card1 包含“已访问”类。

之后假设 card3 div 出现，我再次单击“下一步”按钮。然后它应该向我显示 card3 div，因为它是唯一不包含“已访问”类的 div。

我有很多这种类型的 div。请记住卡片应该被洗牌(随机)。

请帮我解决这个问题。

Answer 1

JQuery 有一个not() 选择器来过滤现有的查询。然后你可以使用来自this answer的方法选择一个随机元素。放在一起:

let unvisited = $('.cards').not('.visited');
let next_card = unvisited.eq(Math.floor(Math.random(unvisited.length)));
next_card.show();