如何解决：每次用户单击按钮时都会重置 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)

Answer 1

这很粗糙，因为我没有完整的代码，但大致如下：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)

Answer 2

您需要使用“this”，如果您的按钮在“div”中，请尝试编写： this.parentElement.className = 'animated infinite bounce delay-2s;代替： matchedDiv.className = 'animated infinite bounce delay-2s;'