1

Как добавить класс active к классу img-catalog-block-item при нажатии на кнопку ЗАКАЗАТЬ. Таких блоков несколько, нужно чтобы класс убирался и добавлялся именно к тому в котором была нажата кнопка

$(".size-category").click(function() {
  $(".size-category").removeClass("active");
  $(".img-catalog-block-item").addClass("active");
  $(this).addClass("active");
  return false;
});
$('#myModal').on('show.bs.modal', function(event) {
  if ($(".size-category").hasClass("active")) {
    var size = $(".size-category.active a").text();
    $(".size").text('Размер: ' + size);
  }
});
$(".buy.buys").click(function(e) {
      e.preventDefault();
      $(this).closest(".catalog__item").find(".img-catalog-block-item").addClass("active");
      $('#myModal').on('show.bs.modal', function(event) {
        var style = getComputedStyle($(".img-catalog-block-item.active")[0]);
        var imgSrc = style.backgroundImage.replace('url(\"', '').replace('\")', '');
        $(".imagebox").attr("src", imgSrc);
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="catalog__item">
  <div class="img-catalog-block-item" style="background: url(img/l-blue.jpg) center no-repeat; background-size: cover;"></div>
  <a data-toggle="modal" data-target="#myModal" class="buy buys">ЗАКАЗАТЬ</a>
</div>
<div class="catalog__item">
  <div class="img-catalog-block-item" style="background: url(img/red.jpg) center no-repeat; background-size: cover;"></div>
  <a data-toggle="modal" data-target="#myModal" class="buy buys">ЗАКАЗАТЬ</a>
</div>

1

2 ответа 2

1

Создай функцию напиши её где нить выше или воткни где у тебя JS живёт))

window.addEventListener('load', function(){
     var arrBuys = document.querySelectorAll('.buy.buys');  
     if(arrBuys && arrBuys.length > 0){
         for(var j = 0, jLen = arrBuys.length; j < jLen; j++){

             arrBuys[j].addEventListener('click', function(){
                var parFirst = this.parentNode.querySelector('.img-catalog-block-item');
                if(parFirst){
                    var parFirstClass = String(parFirst.className);

                    if(parFirstClass.indexOf('active') == -1){
                        parFirst.className = parFirstClass+' active';
                    };
                }; 

             }, false);

         };
     };
}, false);
1
$(".buy.buys").click(function(e){
  e.preventDefault();
  $(this).closest(".catalog__item").find(".img-catalog-block-item").addClass("active");
});
2
  • добавил в вопрос свой скрипт, он не срабатывает в чём ошибка?
    – Oleksandr
    18 мар 2019 в 19:22
  • 1
    @Alexander Ошибка - в низком качестве вопроса. Создайте работающий пример, используя кнопку "Фрагмент кода" в редакторе вопроса. И еще в том, что вы назначаете один обработчик события внутри другого.
    – user176262
    18 мар 2019 в 19:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.