0

Привет. Задача такая: есть несколько товаров и детальная инфа по каждому. Необходимо при клике на первью товара

  1. Выделить активное превью (добавить класс active-other)
  2. Показать товар (добавить класс active-item)

Я сделал только 1 пункт. А как сделать чтобы появлялся активный товар?Помогите

$(".other-item").click(function(e) {
  e.preventDefault();
  $(".other-item").removeClass('active-other');
  $(this).addClass('active-other');
});
.product {
  display: none;
}

.active-item {
  display: block!important;
}
.active-other {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--товар подробнее-->
<div class="product active-item">
  <img class="sp-imag" src="img/tovar1.png">
  <h3>товар 1</h3>
</div>
<div class="product">
  <img class="sp-imag" src="img/tovar2.png">
  <h3>товар 2</h3>
</div>
<!--превью товаров-->
<div class="other" id="other">
  <div class="other-item active-other">
    <img src="img/tovar1.png"/>
    <h5>товар 1</h5>
    <p>215 руб.</p>
  </div>
  <div class="other-item">
    <img src="img/tovar2.png"/>
    <h5>товар 2</h5>
    <p>215 руб.</p>
  </div>
</div>

1 ответ 1

0

$(() => {
  $('.container').each(function() {
    const $container = $(this),
      $otherItems = $container.find('.other-item'),
      $products = $container.find('.product');

    $otherItems.click(function() {
      const $this = $(this),
        index = $this.data('product-id');

      $otherItems.removeClass('active-other');
      $this.addClass('active-other');
      
      $products.removeClass('active-item')
        .filter('[data-id="' + index + '"]').addClass('active-item');
    });
  });
});
.product {
  display: none;
}

.active-item {
  display: block!important;
}

.active-other {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!--товар подробнее-->
  <div class="product active-item" data-id="1">
    <img class="sp-imag" src="img/tovar1.png">
    <h3>товар 1</h3>
  </div>
  <div class="product" data-id="2">
    <img class="sp-imag" src="img/tovar2.png">
    <h3>товар 2</h3>
  </div>
  <!--превью товаров-->
  <div class="other" id="other">
    <div class="other-item active-other" data-product-id="1">
      <img src="img/tovar1.png"/>
      <h5>товар 1</h5>
      <p>215 руб.</p>
    </div>
    <div class="other-item" data-product-id="2">
      <img src="img/tovar2.png"/>
      <h5>товар 2</h5>
      <p>215 руб.</p>
    </div>
  </div>
</div>

P.S. Правда не очень понятно зачем в данном коде нужно e.preventDefault()

6
  • А как бы вы решили данную задачу? как професионал 11 сен 2017 в 5:39
  • @Виктор, я бы добавил какие-нибудь атрибуты, что бы по ним ориентироваться, мало-ли по какой причине вздумается переставить порядок в одном блоке и не переставить в другом (скажем из-за условностей позиционирования при верстке), иначе блоки будут ссылаться не на те превью что надо. Плюс добавить бы контейнер, на случай, если этот блок будет использован на одной странице дважды. 11 сен 2017 в 5:42
  • например если добавить атрибут data_item и каждому товару уникальный номер.Как можно будет обратиться к нему и присвоить класс? 11 сен 2017 в 6:04
  • @Виктор, обновил, добавился контейнер .container, атрибуты data-product-id, data-id и собственно изменился обработчик, теперь разницы нет в каком порядке стоят элементы и можно использовать этот блок несколько раз на странице. 11 сен 2017 в 6:21
  • Спасибо!А как с вами можно связаться?есть несколько вопросов (не за спасибо)) 13 сен 2017 в 1:58

Ваш ответ

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

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