Почему не работают кнопки для переключение картинок?

Question

почему у меня не работает код для переключение картинок?Хочу чтобы при нажатии на класс black shape__color появлялась только одна картинка из пяти например tshirt_07.png. чтобы к каждому клаасу был привязана одна уникальная картинка. Я написал код в Jquery, но он не хочет работать. Можете объяснить, где я ошибся?Спасибо. product.html:

 <div class="wrapper__tshirt">
            <section class="product-tshirt">
                <div class="tshirt__list">
                  <div class="left__container">
                    <img src="/img/tshirts/tshirt_07.png" alt="" class="img__item">
                    <img src="/img/tshirts/tshirt_08.png" alt="" class="img__item">
                    <img src="/img/tshirts/tshirt_09.png" alt="" class="img__item">
                    <img src="/img/tshirts/tshirt_10.png" alt="" class="img__item">
                    <img src="/img/tshirts/tshirt_11.png" alt="" class="img__item">
                  </div>
                  <div class="right__container">   
                    <div class="colors"> 
                      <div class="black shape__color"></div>
                      <div class="beige shape__color"></div>
                      <div class="green shape__color"></div>
                      <div class="blue shape__color"></div>
                      <div class="red shape__color"></div> 
                    </div>
                  </div> 
                </div>
            </section> <!---Tshirt-->
          </div>

Файл JQUERY

  $(document).ready(function(){
             $('.product-tshirt').on('click', 'shape__color', function(){
                 $(".img__item").hide();
                 var id = $('.product-tshirt .shape__color').index(this);
                 $(".img__item").eq(id).show();
        })
  });

Answer 1

В вашем случае, проблема во втором параметре в функции .on(). Второй параметр должен быть селектором, то есть в вашем случае .shape__color, а вы ищите по тегу <shape__color>

Скорее всего допущена опечатка и пропущена точка

$(document).ready(function(){
    $('.product-tshirt').on('click', '.shape__color', function(){
        $(".img__item").hide();
        var id = $('.product-tshirt .shape__color').index(this);
        $(".img__item").eq(id).show();
    })
});

БЛОГ НА HUSL

Почему не работают кнопки для переключение картинок?

Ответы (1 шт):