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