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

问题描述

我想要的是能够产生类似这样的东西...

但是为什么我执行的jquery中的其他项不能按图片中的预期工作？

<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（更少）代码

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

解决方法

主要问题是您的点击侦听器-您正在使用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的{{1}}方法来简化检查。您可以使用hasClass

来代替jquery

将其包装起来，而不是使用if-else语句，建议您使用另一种方法来处理按钮单击。以下是我自己的实现

$(".card1 p").html() === "CARD 1"

$(".card1").hasClass('active')

$(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遍历方法。

card frontend javascript jquery