javascript - document.querySelector 选择不同的按钮

Question

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

var btn = document.querySelector(".boxer");
var ctx;
var colorInfoElem = document.querySelector("#colorInfo");
html2canvas(btn).then(canvas => {
    ctx = canvas.getContext("2d");
    createParticleCanvas();
    let reductionFactor = 17;
    btn.addEventListener("click", e => {
        // Get the color data for our button
        let width = btn.offsetWidth;
        let height = btn.offsetHeight
        let colorData = ctx.getImageData(0, 0, width, height).data;
        // Keep track of how many times we've iterated (in order to reduce
        // the total number of particles create)
        let count = 0;
        // Go through every location of our button and create a particle
        for (let localX = 0; localX < width; localX++) {
            for (let localY = 0; localY < height; localY++) {
                if (count % reductionFactor === 0) {
                    let index = (localY * width + localX) * 4;
                    let rgbaColorArr = colorData.slice(index, index + 4);
                    let bcr = btn.getBoundingClientRect();
                    let globalX = bcr.left + localX;
                    let globalY = bcr.top + localY;
                    createParticleAtPoint(globalX, globalY, rgbaColorArr);
                }
                count++;
            }
        }
    });
});
/* An "exploding" particle effect that uses circles */
var ExplodingParticle = function() {
    // Set how long we want our particle to animate for
    this.animationDuration = 1000; // in ms
    // Set the speed for our particle
    this.speed = {
        x: -5 + Math.random() * 10,
        y: -5 + Math.random() * 10
    };
    // Size our particle
    this.radius = 5 + Math.random() * 5;
    // Set a max time to live for our particle
    this.life = 30 + Math.random() * 10;
    this.remainingLife = this.life;
    // This function will be called by our animation logic later on
    this.draw = ctx => {
        let p = this;
        if (this.remainingLife > 0 && this.radius > 0) {
            // Draw a circle at the current location
            ctx.beginPath();
            ctx.arc(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();
            // Update the particle's location and life
            p.remainingLife--;
            p.radius -= 0.25;
            p.startX += p.speed.x;
            p.startY += p.speed.y;
        }
    }
}
var particles = [];

function createParticleAtPoint(x, y, colorData) {
    let particle = new ExplodingParticle();
    particle.rgbArray = colorData;
    particle.startX = x;
    particle.startY = y;
    particle.startTime = Date.now();
    particles.push(particle);
}
var particleCanvas, particleCtx;

function createParticleCanvas() {
    // Create our canvas
    particleCanvas = document.createElement("canvas");
    particleCtx = particleCanvas.getContext("2d");
    // Size our canvas
    particleCanvas.width = window.innerWidth;
    particleCanvas.height = window.innerHeight;
    // Position out canvas
    particleCanvas.style.position = "absolute";
    particleCanvas.style.top = "0";
    particleCanvas.style.left = "0";
    // Make sure it's on top of other elements
    particleCanvas.style.zIndex = "1001";
    // Make sure other elements under it are clickable
    particleCanvas.style.pointerEvents = "none";
    // Add our canvas to the page
    document.body.appendChild(particleCanvas);
}

function update() {
    // Clear out the old particles
    if (typeof particleCtx !== "undefined") {
        particleCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    }
    // Draw all of our particles in their new location
    for (let i = 0; i < particles.length; i++) {
        particles[i].draw(particleCtx);
        // Simple way to clean up if the last particle is done animating
        if (i === particles.length - 1) {
            let percent = (Date.now() - particles[i].startTime) / particles[i].animationDuration;
            if (percent > 1) {
                particles = [];
            }
        }
    }
    // Animate performantly
    window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);

<div class="container">
<div class="boxer"><a href="#" class="attractionslink">Attractions</a></div>
</div>

<div class="container">
<div class="boxer2"><a href="#" class="attractionslink">Safety</a></div>
</div>

现在，当我单击 boxer 1 时，它起作用了，但是当我单击 boxer 2 时，它不起作用。我尝试将 boxer2 添加到 var btn 的第一行，所以它看起来像 var btn = document.querySelector (".boxer",".boxer2"); 但它没有用。

Answer 1

您正在寻找querySelectorAll .

代码应该是这样的:

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

现在，无论你在哪里使用 btn 作为单个元素，你都必须更改代码以便从 array btn(是的，它现在是一个数组)。

例如，现在，您必须像这样在所有按钮上循环(可能是 forEach)，而不是 btn.addEventListener:

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