Не работает jquery код

111

09 июня 2021, 15:10

<div id="slide">
    <div class="slide_item slide_1">
        <div class="slide_bg"></div>
        <img class="slide_img" src="assets/img/slide_1.jpg"/>
    </div>
    <div class="slide_item slide_2">
        <div class="slide_bg"></div>
        <img class="slide_img" src="assets/img/slide_2.jpg"/>
    </div>
    <div class="slide_control">
        <div class="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 36">
            <path id="Shape_20114_20copy_203" d="M20,18.084,2.794,36,0,33.07,14.473,18,0,2.93,2.794,0,20,17.917,19.92,18Z" opacity="0.4"/>
        </svg>
        </div>
        <div class="next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 36">
            <path id="Shape_20114_20copy_203" d="M20,18.084,2.794,36,0,33.07,14.473,18,0,2.93,2.794,0,20,17.917,19.92,18Z" opacity="0.4"/>
        </svg>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    const Slide1 =  $('.slide_1');
    const Slide2 =  $('.slide_2');
    const Up = $('.sli_up');
    const Down = $('.sli_d');
    const Next =  $('.next');
    const Next2 =  $('.next_a');
   Next.click(function(){
        Slide1.addClass('sli_up');
        Slide2.addClass('sli_d');
        Next.removeClass('next');
       Next.addClass('next_a');
    });
   Next2.click(function(){
        Slide1.removeClass('sli_up');
         Slide2.removeClass('sli_d');
         Slide1.addClass('sli_d');
         Slide2.addClass('sli_up');
       Next2.addClass('next');
    });
});

Надо чтобы при клике на div с классом "next" ему присваивался класс "next_a", а "next" удалялся. И соответственно при клике на "next_a" присваивался класс "next", а "next_a" удалялся.
1 действие происходит отлично, но вот "next_a" не реагирует на клик никак.

Answer 1

Когда Вы вызываете

const Next2 =  $('.next_a');

на странице нет такого элемента.

$(document).on("click", ".next", function() { 
  ... 
  $(this).toggleClass('next next_a'); 
}); 
$(document).on("click", ".next_a", function() { 
  ... 
  $(this).toggleClass('next next_a'); 
});