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

Question

我预期的结果

我想要的是能够生产出像这样的东西......

但是为什么如果我执行的 jquery 中的 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语句 for $(".card1 p").html() === "CARD 1"is always true。

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

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

总结一下，而不是使用 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().