Манипуляция с DOM (клик по одному определенному элементу меняет состояние определеного другого элемента)?

Question

[Gregory]

День добрый.
Есть такая структура:

<div class="wrapper">
   <h3 class="title ev-title">{{typeName(event)}}</h3>
   <p class="desc">
        {{time_end}}
        {{event.description}}
   </p>
   <div class="dop-descr">
        <ul>
          <li>Продукт 1 вес: 500 мг/гг</li>
          <li>Продукт 2 вес: 500 мг/гг</li>
          <li>Продукт 3 вес: 500 мг/гг</li>
          <li>Продукт 4 вес: 500 мг/гг</li>
        </ul>
   </div>
 </div>

Таких wrapper может быть много

Нужно когда кликаешь на .ev-title вызывать метод .toggleClass у .dop-descr (но только в рамках одного .wrapper)

Помогите дописать:
как у всех .dop-descr менять класс я написал:

$(document).on('click', '.ev-title', function () {
          $('.dop-descr').toggleClass('visible');

Как-то можно обратиться через this к определенному .dop-descr, а не ко всем?

Answer 1

[0xD34F]

Если прямо отвечать на спрошенное, то...

$(document).on('click', '.ev-title', function() {
  $(this).closest('.wrapper').find('.dop-descr').toggleClass('visible');
});

Но вообще, можно сделать немного иначе.

Класс лучше переключать не у .dop-descr, а у их самых дальних не общих предков, которыми, насколько я понял, являются .wrapper. Если вдруг решите дополнительно стилизовать внутри .wrapper с кликнутым .ev-title ещё какие-то элементы, то не придётся переписывать js-код. Конечно, css придётся немного переписать, вместо .dop-descr.класс стилизовать надо будет .класс .dop-descr.

const containerSelector = '.wrapper';
const buttonSelector = '.ev-title';
const activeClass = 'active';

Переключать класс можете по-прежнему с помощью jquery:

$(containerSelector).on('click', buttonSelector, e => {
  $(e.delegateTarget).toggleClass(activeClass);
});

Или, к чёрту jquery:

document
  .querySelectorAll(`${containerSelector} ${buttonSelector}`)
  .forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.closest(containerSelector).classList.toggle(activeClass);
}

Comments

[Gregory]

0xD34F, спасибо!