html 如何对所有按钮应用相同的功能?[duplicate]

mgdq6dx1  于 2022-11-20  发布在  其他
关注(0)|答案(2)|浏览(236)

此问题在此处已有答案

How to get all elements from querySelectorAll and use with addEventListener(2个答案)
8天前关闭。
如何将相同的功能添加到所有加号按钮,以便每次单击这些加号按钮中的任何一个,数字都会增加1,在这种情况下,12将变成13,然后是14,依此类推。
第一个

3wabscal

3wabscal1#

可以使用querySelectorAll获取每个元素,然后使用forEach将函数添加到onclick事件。

document.querySelectorAll('.countUp').forEach(element=>{
    element.onclick = function(){count++}
})
4nkexdtk

4nkexdtk2#

我的方法是遍历所有的rating div,然后在rating div中为每个按钮添加侦听器。方法.querySelectorAll帮助您获取由选择器标识的所有元素,其中.querySelector只提供第一个元素。
此外,查询选择器方法出现在每个DOM元素上,然后只对该元素的子元素执行查询。
下面是一种为当前HTML结构进行迭代和分配监听器的方法。

const ratingElements = document.querySelectorAll('div.rating')

ratingElements.forEach(ratingElement => {
    const countUpButton = ratingElement.querySelector('button.countUp')
    const countDownButton = ratingElement.querySelector('button.countDown')
    const counterDisplayElement = ratingElement.querySelector('count')

    countUpButton.addEventListener('click', function() {
        const currentCount = Number(counterDisplayElement.innerHTML);
        counterDisplayElement.innerHTML = String(currentCount + 1);
    })

    countDownButton.addEventListener('click', function() {
        const currentCount = Number(counterDisplayElement.innerHTML);
        counterDisplayElement.innerHTML = String(currentCount - 1);
    })
})

相关问题