单击按钮后如何显示下一张卡片并再次单击并再次显示下一张卡片到最后一张卡片并使用jquery提交？

Question

the results I expected

我想要的是能够制作出这样的东西......

但是为什么我执行的 jquery 中的 if else 不能像图片中那样工作？

这在我的 html 代码中

<div>
  <div class="card1 active">
    <p>CARD 1</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
  <div class="card2">
    <p>CARD 2</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
  <div class="card3">
    <p>CARD 3</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
  <div class="card4">
    <p>CARD 4</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
</div>

这是我的 css(less) 代码

div {
  padding: 10px;
  
  .card1,.card2,.card3,.card4 {
    display: none;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #777;
  }
  
  .active {
    display: block;
  }
}

jQuery

$(document).ready(() => {
  $(".btn-next").click(() => {
    if($(".card1 p").html() === "CARD 1") {
      $(".card2").addClass("active");
    } else if($(".card2 p").html() === "CARD 2") {
      $(".card3").addClass("active");
    } else if($(".card3 p").html() === "CARD 3") {
      $(".card4").addClass("active");
    }
  }); 
});

https://codepen.io/kucingompong-cp/pen/abNmBzQ

Answer 1

主要问题是您的点击监听器 - 您正在使用 if-else 块，它只会运行 if 语句，因为 $(".card1 p").html() === "CARD 1" 始终是 true。

您可以通过重新排列if-else 语句来修复它（将$(".card1 p").html() === "CARD 1" 放在else 块中；将$(".card2 p").html() === "CARD 2" 放在第二个else-if 块中，等等）。

您还可以通过使用active 类和jquery 的hasClass 方法来简化检查。你可以用$(".card1").hasClass('active')代替$(".card1 p").html() === "CARD 1"

结束它，而不是使用 if-else 语句，我建议您使用另一种方法来处理按钮点击。以下是我自己的实现

$(document).ready(() => {
  $(".btn-next")
  .click(e => $(e.target).parent().next().addClass('active')); 
});

div {
  padding: 10px;
  
}

 .card1,.card2,.card3,.card4 {
    display: none;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #777;
 }
  
  .active {
    display: block;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="card1 active">
    <p>CARD 1</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
  <div class="card2">
    <p>CARD 2</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
  <div class="card3">
    <p>CARD 3</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
  <div class="card4">
    <p>CARD 4</p>
    <button class="btn-back">BACK</button>
    <button class="btn-next">NEXT</button>
  </div>
</div>

我使用了一些jquery遍历方法parent()和next()。