Как при нажатии на блок с id="какой-то текст" добавить стили к блоку, у которого class="такой же текст"?

Question

[SobolevVladimir]

Есть список ul>li и очень много тэгов p. Нужно, чтобы при нажатии на li, брался его id и ко всем стилям, у которых class имеет такое же значение, применялись определенные стили. Как такое сделать?

Answer 1

[0xD34F]

По каким элементам надо кликать и где они находятся:

const container = document.querySelector('ul');
const itemSelector = 'li';

Что касается стилей, то будем устанавливать как заранее неизвестные значения, так и предопределённые:

const randomStyles = () => ({
  'background-color': `#${(Math.random() * 0xFFFFFF | 0).toString(16).padStart(6, 0)}`,
  'padding-left': `${Math.random() * 100 | 0}px`,
});

.active {
  border: 3px dashed blue;
}

const update = (el, styles) => (
  Object.assign(el.style, styles),
  el.classList.toggle('active')
);

Ловить клики можно непосредственно на интересующих нас элементах:

container.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  document.querySelectorAll(`.${this.id}`).forEach(function(n) {
    update(n, this);
  }, randomStyles());
});

Или добавлять обработчик события один раз - их общему предку:

container.addEventListener('click', ({ target: t }) => {
  if ((t = t.closest(itemSelector)) && container.contains(t)) {
    const styles = randomStyles();
    for (const n of document.getElementsByClassName(t.getAttribute('id'))) {
      update(n, styles);
    }
  }
});

Comments

[SobolevVladimir]

Спасибо Вам огромное