Есть несколько select со скриптом на изменение соседних элементов. Как сделать чтобы скрипт отрабатывал внутри того блока, в котором изменили select?

Question

[rasimzes]

Необходимо чтобы изменения заголовка и цены происходили только в том блоке в котором был изменен select.
Codepen

Answer 1

[0xD34F]

const containerSelector = '.card';
const selectSelector = `${containerSelector} select`;
const key = 'name';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;

$(selectSelector).change(function() {
  $(this)
    .closest(containerSelector)
    .find(attrSelector)
    .hide()
    .filter(`[${attr}="${this.value}"]`)
    .show();
}).val(defaultValueSelected).trigger('change');

// или

const selects = document.querySelectorAll(selectSelector);
const onChange = ({ target: t }) => t
  .closest(containerSelector)
  .querySelectorAll(attrSelector)
  .forEach(n => n.style.display = t.value === n.dataset[key] ? 'block' : 'none');

selects.forEach(n => {
  n.value = defaultValueSelected;
  n.addEventListener('change', onChange);
  n.dispatchEvent(new Event('change'));
});

Comments

[rasimzes]

Спасибо!

Answer 2

[profesor08]

Выбираешь блоки, в блоке выбираешь селект, навешиваешь на него обработчики.