У меня есть следующий фрагмент JS/prototypeJS, который я бы хотел написать в полной версии Vanilla JS. Я хочу щелкнуть элемент (один из нескольких элементов с тем же классом - faq-container
) и добавить определенный класс (в этом случае faq-display
) и добавить этот класс только в родительский контейнер (faq-block
).Преобразование прототипа JS в ванильный JS.
Я понимаю, что чистая функция JS связана с .parent.addClass
, но не может найти подходящего примера для моей ситуации.
В prototypeJs линии:
faqContainers[i].addEventListener('click', function(e) {
и
var faqToggle = e.target.up('.faq-block');
Файл скрипта:
var faqContainers = document.getElementsByClassName('faq-container');
for (var i = 0; i < faqContainers.length; i++) {
faqContainers[i].addEventListener('click', function(e) {
var faqToggle = e.target.up('.faq-block');
if (faqToggle.classList.contains('faq-display')) {
faqToggle.classList.remove('faq-display');
} else {
faqToggle.classList.add('faq-display');
}
});
}
Большое спасибо!
[ 'addEventListener'] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) не является прототипом метода – Bergi
В зависимости от вашей DOM (вы не указали нам свою разметку страницы) вам может даже не понадобиться 'up', но вы можете просто использовать что-то вроде' e.currentTarget.parentElement'. – Bergi
В Mac Safari (последнее) вы можете заменить 'ближайший' на' up', и ваш скрипт работает без изменений. Если вы исследуете полиполк для ближайшего (который только становится родным для большинства целевых браузеров), вы должны быть установлены. – Walter