@Vovanichh

При выборе вкладки применить класс определенному объекту??

В общем реализую только информационный магазинчик с товарами.
Сделал 5 вкладок, при нажатии на вкладку меняется содержимое поля самым простым способом, через Display: none и block.

Далее задумка такая - при нажатии на картинку, картинка пропадает, а на ее месте появляется текст =)

Пока всё работает.

Но далее я сталкнулся с такой проблемой, при выборе любой вкладки кроме первой - при нажатии на картинку она пропадает, а текст не появляется. Как я понял браузер считывает код с самого начала, находит самый первый элемент с классом "description" и применяет к ниму "description_active".

А мне нужно чтобы этот класс применялся к первому классу "description" именно этой секции =/

-HTML-
<section class="care tab_content" id="care">
  <div class="wrapper_care">
   <div class="magazin">

    <div class="product-box">
     <div class="img-product">
      <img src="img/kosmetic/care_1.jpg" alt="product">
     </div>
     <div class="description">
      <p class="description_title">
       - Thai-Sabai -
      </p>
      <p class="description_text">
       Текст
      </p>
     </div>
     <div class="product-title">
      <p class="title">Очищающий гель
      Moods Огурец</p>
      <p class="price">580 руб.</p>
     </div>
    </div>

   </div>
  </div>
 </section>


-JavaScript-

// При клике на картинку товара она скрывается и появляется текст

  $('.img-product').on('click', function() {
      let currTab = $(this).parent().index();
      console.log(currTab);
      $('.img-product').removeClass('product-box-active');
      $(this).addClass('product-box-active');
      $('.description').removeClass('description_active');
      $('.description').eq(currTab).addClass('description_active');
  })

// При клике на текст он скрывается и появлется картинка товара

  $('.description').on('click', function() {
      let currText = $(this).parent().index();
      console.log(currText);
      $('.description').removeClass('description_active');
      $('.img-product').removeClass('product-box-active');
  })

// Клики работают.

// При нажатии на раздел меняются секции

$('.list').on('click', function(e) {
      e.preventDefault();
       let categoryTab = $(this).parent().index();
       console.log(categoryTab);
      $('.list').removeClass('list_activ');
      $(this).addClass('list_activ');
      $('.description').removeClass('description_active');
      $('.img-product').removeClass('product-box-active');
      $('.tab_content').removeClass('tab_content_activ');
      $('.tab_content').eq(categoryTab).addClass('tab_content_activ');
  })
  • Вопрос задан
  • 25 просмотров
Пригласить эксперта
Ответы на вопрос 1
@4ch23
Вы правильно поняли, у вас селектор общий для всех элементов на странице.
Попробуйте детализировать его, например так:
$('.description', $(this).parent()).removeClass('description_active');
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы