Блог

Я добавил класс к кнопке, а затем удалил текущий класс. Теперь, когда я снова нажимаю кнопку, я хочу удалить добавленный класс, а затем добавить старый класс. но это не работает. В чем, по-видимому, проблема?

HTML:

 <div class="cost">
    <div class="for-cost-button">
        <button class="btn btn-success cost-button">Click Me</button>
    </div>
</div>
  

jQuery:

 var j = jQuery.noConflict();
j(document).ready(function () {
    j(".cost-button").click(function () {
        j(".cost").addClass("show-cost");
        j(".cost-button").addClass("close-cost");
        j(".cost-button").removeClass("cost-button");
    });

    j(".for-cost-button").on("click", ".close-cost", function () {
        j(".cost").removeClass("show-cost");
        j(".close-cost").addClass("cost-button");
        j(".close-cost").removeClass("close-cost");
    });
});
  

Вот что пошло не так с вашим кодом :

вы добавили два прослушивателя событий одновременно, когда вы нажимаете на свою кнопку, вы автоматически нажимаете на div, окружающий вашу кнопку, поэтому происходит следующее :

-вы добавляете стоимость показа класса в первый div -вы добавляете стоимость закрытия класса к своей кнопке -вы удаляете кнопку стоимости класса из своей кнопки

• показ стоимости класса удален из вашего div
• вы добавляете класс show-cost к кнопке .close-cost
• вы удаляете стоимость закрытия класса с кнопки

если вы посмотрите на приведенный ниже код с комментариями

вы обнаружите, что :

-1-е действие отменяет 4-е действие, затем 6-е действие отменяет 2-е действие, затем 5-е действие отменяет 3-е действие

Я добавил консоль.войдите в свой код, чтобы убедиться, что события происходят одновременно при нажатии кнопки

 <div class="cost">
  <div class="for-cost-button">
      <button class="btn btn-success cost-button">Click Me</button>
 </div>
</div>
<script
  src="https://code.jquery.com/jquery-3.4.0.js"
  integrity="sha256-DYZMCC8HTC QDr5QNaIcfR7VSPtcISykd 6eSmBW5qo="
  crossorigin="anonymous"></script>
<script>
var j = jQuery.noConflict();
j(document).ready( function () {
  j(".cost-button").click(function(){
    console.log(".cost-button is clicked");
     j( ".cost" ).addClass( "show-cost" ); // add a class to the first div
     j( ".cost-button" ).addClass( "close-cost" ); // add class close-cost to button
          j( ".cost-button" ).removeClass( "cost-button" ); // remove class cost-button from button
   });

   j(".for-cost-button").on("click", ".close-cost", function(){
     console.log("the div is clicked"); // when the div around the button is clicked
      j( ".cost" ).removeClass( "show-cost" ); // the class show-cost is removed from your div
      j( ".close-cost" ).addClass( "cost-button" ); // adds the class show-cost to the button .close-cost
      j( ".close-cost" ).removeClass( "close-cost" ); // removes the class close-cost from the button
   });
});
</script>