Как вызывать функцию только по отношению к дочернему общему блоку кнопки?

Question

[godsplan]

Есть список блоков с классом documents_block внутри каждого из них есть кнопка с классом open-doc-list при нажатию на которую открывается documents-content
Но сейчас открываются все блоки при событии, как сделать так чтобы событие было инвдивидуальным для каждого блока?Надеюсь понятно о чем я.

Codepen

Answer 1

[0xD34F]

Класс лучше переключайте не у .img-block, а у их самых дальних не общих предков, т.е., у .documents_block. В этом случае не придётся переписывать js-код, если вдруг потребуется стилизовать ещё-что то, кроме .img-block, или если решите изменить внутреннюю структуру .documents_block. Вместо .класс дополнительные стили надо будет прописывать у .класс .img-block.

const itemSelector = '.documents_block';
const buttonSelector = `${itemSelector} .open-doc-list`;
const contentSelector = '.documents-content';
const activeClass = 'active';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const onClick = e => $(e.currentTarget)
  .closest(itemSelector)
  .toggleClass(activeClass)
  .find(contentSelector)
  [toggleEffect]();


// обработчик клика подключаем к кнопкам
$(buttonSelector).click(onClick);

// или, если предполагается добавление новых блоков уже после подключения
// обработчика, то лучше будет повесить его на документ, тогда всё будет
// работать как надо без каких-либо дополнительных действий
$(document).on('click', buttonSelector, onClick);

Comments

[godsplan]

Спасибо большое.