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>

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

Answer 1

您正在寻找querySelectorAll。

代码如下：

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

现在，在将btn用作单个元素的任何地方，都必须更改代码以从数组 btn中获取值（是的，现在是一个数组）。

例如，现在，您不必像这样btn.addEventListener遍历所有按钮（也许forEach）：

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

Answer 2

var btns = document.querySelectorAll(".boxer, .boxer2");

与选择样式元素的.css文件中的CSS选择器语法完全相同。您可以用逗号分隔两个不同的内容。

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

var btns = document.querySelectorAll('.boxer,.boxer2');

[].forEach.call(btns, function(btn) {
  console.log(btn);
  btn.addEventListener('click', function(event) { 
    alert(this.innerText + " Clicked!");
  })
})

<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>

Answer 3

var btn = document.querySelectorAll(".boxer, .boxer2")
[].prototype.forEach.call(btn, function(button) {
  button.addEventListener // rest of the code
});

document.querySelector选择不同的按钮

3 个答案: