Как исправить: CSS-анимация сбрасывается каждый раз, когда пользователь нажимает кнопку

Question

У меня на странице есть 3 кнопки (мужская, женская, не гендерная), которые заставляют персонажей подпрыгивать на странице. В настоящее время, когда пользователь нажимает вторую кнопку, символы первой кнопки продолжают подпрыгивать. Как сделать так, чтобы отскакивали символы только одной кнопки? Код JavaScript ниже:

const allDivs = Array.from(document.querySelectorAll('div'))

const mainHeader = document.querySelector('header')

let maleButton = document.createElement('button')
maleButton.textContent = 'Male Characters'
maleButton.addEventListener('click', () => {
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s'
    })
});

let femaleButton = document.createElement('button')
femaleButton.textContent = 'Female Characters'
femaleButton.addEventListener('click', () => {
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

let otherButton = document.createElement('button')
otherButton.textContent = 'Non-Gender Characters'
otherButton.addEventListener('click', () => {
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

mainHeader.appendChild(maleButton)
mainHeader.appendChild(femaleButton)
mainHeader.appendChild(otherButton)

javascript html css

0

JCA 25 Окт 2019 в 08:35

Перед установкой анимированного класса для выбранного персонажа отключите анимацию всех персонажей (matchedDiv.className = '').

–

see sharper

25 Окт 2019 в 08:48

Не могли бы вы объяснить это более подробно в ответе?

–

JCA

25 Окт 2019 в 08:51

Добавьте также полный код html / css

–

Rishab

25 Окт 2019 в 09:56

Answer 1

Вам нужно использовать "this", если ваши кнопки в "div", попробуйте написать:

 this.parentElement.className = 'animated infinite bounce delay-2s;

Вместо того:

 matchedDiv.className = 'animated infinite bounce delay-2s;'

0

Zerhogi 25 Окт 2019 в 10:40

Answer 2

Это грубо, потому что у меня нет полного кода, но примерно так:

const allDivs = Array.from(document.querySelectorAll('div'))

const mainHeader = document.querySelector('header')

function clearAnimations() {
  [maleCharacters, femaleCharacters, otherCharacters].forEach(c => 
    c.forEach(character => allDivs.find((oneDiv) => 
      oneDiv.firstChild.textContent === character.name).className = '';
  });
}

let maleButton = document.createElement('button')
maleButton.textContent = 'Male Characters'
maleButton.addEventListener('click', () => {
    clearAnimations();
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s'
    })
});

let femaleButton = document.createElement('button')
femaleButton.textContent = 'Female Characters'
femaleButton.addEventListener('click', () => {
    clearAnimations();
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

let otherButton = document.createElement('button')
otherButton.textContent = 'Non-Gender Characters'
otherButton.addEventListener('click', () => {
    clearAnimations();
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

mainHeader.appendChild(maleButton)
mainHeader.appendChild(femaleButton)
mainHeader.appendChild(otherButton)

0

see sharper 28 Окт 2019 в 01:45

Как исправить: CSS-анимация сбрасывается каждый раз, когда пользователь нажимает кнопку

2 ответа

Похожие вопросы

Новые вопросы

javascript