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

Question

[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');
  })

Answer 1

[4ch23]

Вы правильно поняли, у вас селектор общий для всех элементов на странице.
Попробуйте детализировать его, например так:

$('.description', $(this).parent()).removeClass('description_active');

Comments

[Vovanichh]

Не совсем вас понял, что куда и зачем =/

Пояснение: при нажатии на картинку происходит следующее:
-> img-product product-box-active
-> description description_active

А при нажатии на текст:
-> img-product
-> description

Проблема в том, что "description_active" применяется к самому первому элементу с классом "description", а нужно чтобы класс добавлялся к первому элементу ТОЛЬКО активной вкладки, отдельной секции.

[4ch23]

Vovanichh, ну вот вы и уточните селектор и вместо '.description_active"

1. напишите '.tab_content:visible .description_active'
   
2. используйте конструкцию $('selector', $tab)
   
3. или $tab.find('.selector');