我如何在单击按钮后显示下一张卡片并再次单击并再次显示下一张卡片到最后一张卡片并提交 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 块，它只会运行 $(".card1 p").html() === "CARD 1" 的 if 语句始终是 true.

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

您也可以使用 active class 和 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()。

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

How I can showing the next card after clicking button and click again and show next card again to last card and submit with jquery?

javascript

jquery

frontend

card