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

您需要使用“ this”，如果您的按钮位于“ div”中，请尝试编写：

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

代替：

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

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)

如何解决：每次用户单击按钮时CSS动画都会重置

2 个答案: