Я работаю над улучшением своего JavaScript после использования jQuery. Я пытаюсь переключить видимость списка элементов на основе того, что пользователь нажимает.JavaScript - Переключить классы на основе события click
Вот пример кода Pen: http://codepen.io/sdejaneiro/pen/BjEVBQ?editors=1000
В примере, что я хочу сделать, это, при нажатии на «Часть 1 Пункт C» (или часть 2 Пункт C или часть 3 Пункт) (который имеет класс series) Я хочу показать подэлементы под ним (которые содержатся внутри списка ul с классами seriesSet и hidden. Я дошел до щелчка даже до каждого экземпляра класса series, но не уверен как настроить таргетинг на правильный seriesSet. Я попытался использовать forEach, прикрепленный к каждому экземпляру seriesSet, но это привело к запуску всех списков ul wi го этого класса все сразу.
Я хочу попытаться сохранить код как можно более чистым, поэтому я избегал добавлять идентификаторы в списки seriesSet, но, может быть, мне нужно что-то подобное для JavaScript?
Вот JavaScript:
NodeList.prototype.forEach = Array.prototype.forEach;
//toggle series lists
document.querySelectorAll('.series').forEach(function(i) {
i.addEventListener('click', function(e) {
e.preventDefault();
//select the correct .seriesSet ul list and remove class "hidden"
})
});
Этот ответ верен, просто добавив примечание, что, если вы хотите использовать его в старых браузерах (в основном IE9), вам необходимо включить [прокладку или полиполк] (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#JavaScript_shim_for_other_implementations). –