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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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