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

Posted 2023-03-28

【中文标题】单击按钮后如何显示下一张卡片并再次单击并再次显示下一张卡片到最后一张卡片并使用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?

【发布时间】：2020-12-09 08:27:03

【问题描述】：

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

【参考方案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()。

【讨论】：

我真的建议查一下jquery的遍历方法。它真的会对你有很大帮助。 @MuhammadManshur