Блог

результаты, которые я ожидал

Что я хочу, так это иметь возможность создавать что-то подобное этому …

Но почему, если еще что-то в jquery, который я выполнил, работает не так, как ожидалось, как на картинке?

Это в моем 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-код (меньше)

 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 класс и 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() .