点击3张塔罗牌后触发Ajax加载功能的实现问题

嘿，这个需求不难搞定！我们只需要添加一个计数器来追踪用户点击的有效卡牌数量，同时避免同一张卡牌被重复计数，这样就能实现点击满3张后再触发Ajax请求了。

下面是修改后的完整代码：

<div id="div1">
  <img class="card" alt="塔罗牌1">
  <img class="card" alt="塔罗牌2">
  <img class="card" alt="塔罗牌3">
  <img class="card" alt="塔罗牌4">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 初始化计数器，记录已点击的有效卡牌数量
  let clickedCardCount = 0;
  
  $(".card").click(function(){
    // 先判断当前卡牌是否已经被点击过，防止重复计数
    if (!$(this).hasClass("selected")) {
      // 标记这张卡牌为已选中
      $(this).addClass("selected");
      // 计数器加1
      clickedCardCount++;
      
      // 当选中满3张时，触发Ajax加载
      if (clickedCardCount === 3) {
        $("#div1").load("data....", function() {
          // 加载完成后的回调操作，可选：
          // 比如移除所有卡牌的点击事件，防止重复触发
          $(".card").off("click");
          // 如果需要支持重新选择，可以重置状态
          // clickedCardCount = 0;
          // $(".card").removeClass("selected");
        });
      }
    }
  });
});
</script>

关键逻辑说明： #

• 防重复点击：用selected类标记已点击的卡牌，每次点击时先检查这个类，避免同一张卡牌被多次计数。
• 计数触发：只有点击未选中的卡牌时才增加计数器，当计数器达到3时，才执行load方法发起Ajax请求。
• 后续处理：在load的回调函数里，你可以选择移除所有卡牌的点击事件（防止重复触发请求），或者重置计数器和选中状态，让用户可以重新选择3张卡牌。

可选优化（提升用户体验）： #

可以加一点CSS样式，让用户直观看到哪些卡牌已经被选中：

.card {
  cursor: pointer;
  margin: 0 10px;
}
.card.selected {
  opacity: 0.7;
  border: 2px solid #e74c3c;
  /* 可选：直接禁止已选中卡牌的点击事件 */
  pointer-events: none;
}

这样用户操作起来就更清晰啦！

内容的提问来源于stack exchange，提问作者Juperko