document.querySelector для выбора различных кнопок

Привет, ребята, я не кодер, но я пытаюсь использовать 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");но это не сработало.

javascript,html,

1

Ответов: 3


1

Вы ищете querySelectorAll.

Код будет выглядеть следующим образом:

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

Теперь, везде, где вы использовали btnодин элемент, вам нужно изменить код, чтобы принять значение из массива btn (да, теперь это массив).

Например, теперь, вместо того, чтобы btn.addEventListenerвы должны были (возможно forEach) зацикливаться на всех таких кнопках:

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

0

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


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

JavaScript, HTML,
Похожие вопросы