Я пытаюсь добавить класс через javascript, но он не обновляется в моей модели DOM. Когда я использую jQuery, все работает, как и ожидалось. Проблема в том, что добавление класса svg-active не работает. item.classList.add('tab-brackground--active') работает.
Мой код jQuery -
window.addEventListener('load', function () {
const svg = document.querySelector('svg')
if (svg) {
const items = document.querySelectorAll(
'.woocommerce-grouped-product-list-item'
)
if (items) {
items.forEach((item) => {
item.addEventListener('mouseenter', (e) => {
item.classList.add('tab-brackground--active')
const text = e.target.children[0].innerText
jQuery(`[data-section = "${text.toLowerCase()}"]`).addClass(
'svg--active'
)
})
})
}
}
})
То же самое сделано с javascript, который не работает -
window.addEventListener('load', function () {
const svg = document.querySelector('svg')
if (svg) {
const items = document.querySelectorAll(
'.woocommerce-grouped-product-list-item'
)
if (items) {
items.forEach((item) => {
item.addEventListener('mouseenter', (e) => {
item.classList.add('tab-brackground--active')
const text = e.target.children[0].innerText
document.querySelector(`[data-section = "${text.toLowerCase()}"]`).classList.add(
'svg--active'
)
})
})
}
}
})
Когда я console.info свой элемент javascript, он показывает элемент с добавленным классом, но когда я иду проверять DOM, класс не добавляется.
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания видеоигр, как 2D, так и 3D, с использованием библиотеки Three.js.
Попробуйте так,
window.addEventListener('load', function () {
const svg = document.querySelector('svg')
if (svg) {
const items = document.querySelectorAll(
'.woocommerce-grouped-product-list-item'
)
if (items) {
items.forEach((item) => {
item.addEventListener('mouseenter', (e) => {
item.classList.add('tab-brackground--active')
const text = e.target.children[0].innerText
const nodeList = document.querySelectorAll(`[data-section = "${text.toLowerCase()}"]`);
for(let i=0 ;i<nodeList.length; i++) {
nodeList[i].classList.add('svg--active')
}
})
})
}
}
})