Javascript document.querySelector选择不同的按钮

大家好，我不是一个真正的程序员，但我正在尝试使用dissectigate.js，我在我的网站上的一个按钮上使用它，但我想在许多不同的类/按钮上使用这种效果

var btn=document.querySelector（“.boxer”）；
var-ctx；
var colorInfoElem=document.querySelector（“#colorInfo”）；
html2canvas（btn）。然后（canvas=>{
ctx=canvas.getContext（“2d”）；
createParticleCanvas（）；
设折减系数=17；
btn.addEventListener（“单击”，e=>{
//获取按钮的颜色数据
让宽度=btn.offsetWidth；
让高度=btn.offsetHeight
让colorData=ctx.getImageData（0，0，宽度，高度）；
//跟踪我们迭代了多少次（为了减少
//创建的粒子总数）
让计数=0；
//遍历按钮的每个位置并创建一个粒子
for（设localX=0；localX{
设p=这个；
如果（this.remainingLife>0&&this.radius>0）{
//在当前位置绘制一个圆
ctx.beginPath（）；
ctx.弧（p.startX，p.startY，p.radius，0，Math.PI*2）；
ctx.fillStyle=“rgba（“+this.rgbArray[0]+”，“+this.rgbArray[1]+”，“+this.rgbArray[2]+”，1）”；
ctx.fill（）；
//更新粒子的位置和寿命
p、 余生——；
p、 半径-=0.25；
p、 startX+=p.speed.x；
p、 startY+=p.speed.y；
}
}
}
var粒子=[]；
函数CreateParticleAttPoint（x、y、colorData）{
让粒子=新的爆炸粒子（）；
particle.rgbArray=颜色数据；
particle.startX=x；
粒子.startY=y；
particle.startTime=Date.now（）；
粒子。推（粒子）；
}
变量particleCanvas，particleCtx；
函数createParticleCanvas（）{
//创建我们的画布
particleCanvas=document.createElement（“画布”）；
particleCtx=particleCanvas.getContext（“2d”）；
//调整画布的大小
particleCanvas.width=window.innerWidth；
particleCanvas.height=window.innerHeight；
//定位画布
particleCanvas.style.position=“绝对”；
particleCanvas.style.top=“0”；
particleCanvas.style.left=“0”；
//确保它位于其他元素之上
particleCanvas.style.zIndex=“1001”；
//确保其下的其他元素可单击
particleCanvas.style.pointerEvents=“无”；
//将画布添加到页面
文件.正文.附件（particleCanvas）；
}
函数更新（）{
//清除旧粒子
if（particleCtx的类型！=“未定义”）{
particleCtx.clearRect（0，0，window.innerWidth，window.innerHeight）；
}
//在新位置绘制所有粒子
for（设i=0；i1）{
粒子=[]；
}
}
}
//表演
window.requestAnimationFrame（更新）；
}
window.requestAnimationFrame（更新）


当选择元素进行样式设置时，这与.CSS文件中的CSS选择器的语法完全相同。用逗号分隔两个不同的对象

querySelectorAll返回一个节点列表，您需要将其转换为一个数组，并在该数组上迭代，以将事件侦听器添加到dom列表的每个节点


var btns=document.queryselectoral（'.boxer.boxer2'）；
[]forEach.call（btn，函数（btn）{
控制台日志（btn）；
btn.addEventListener（'click'，函数（事件）{
警报（this.innerText+“单击！”）；
})
})

您正在寻找的

代码如下所示：

var btn = document.querySelectorAll(".boxer, .boxer2")

现在，无论您在哪里使用
btn
作为单个元素，您都必须更改代码，以便从数组中获取值（是的，它现在是一个数组）

例如，现在，您不必使用
btn.addEventListener
，而必须循环（可能）所有按钮，如下所示：

btn.forEach(function(button) {
  button.addEventListener // rest of the code
});


var btn=document.queryselectoral（“.boxer.boxer2”）
[].prototype.forEach.call（btn，函数（按钮）{
button.addEventListener//代码的其余部分
});IMO将不起作用，因为OP希望将事件侦听器添加到与选择器匹配的所有元素中
querySelector
将只返回第一个元素。Hi，所以底部的方式是有效的，除了它只适用于.boxer而不适用于.boxer2。Top way似乎不起作用谢谢你，因为
btn.forEach(function(button) {
  button.addEventListener // rest of the code
});