在单击事件中更改 div 的背景颜色会产生意外（或预期？）结果

Question

我正在做一个猜词游戏，当用户在我创建的可视键盘上单击一个字母时，我希望该字母的背景颜色发生变化（如果猜对了，则为浅绿色，如果猜错则为灰色）。 但是，默认背景（设置为“字母”类）在单击后似乎没有被正确替换。 相反，具有新背景颜色的无样式框（无边框半径等）覆盖了默认背景颜色（视觉上很明显）。 我很想知道为什么会这样。 有人可以启发我吗？ 这是一个已知的现象吗？ 还是与我的活动和 e.target 的使用有关？

请在下面查看我的 HTML、CSS 和 Javascript。

 const currentWord = "abc" $('.keyboard.row.letter').click(function(e) { // Check if 'currentWord' contains clicked letter let check = []; currentWord.split('').forEach(function(letter, i) { let clickedLetter = e.target.firstChild.textContent.toLocaleUpperCase(); if(clickedLetter === letter.toLocaleUpperCase()) { // Change background of correctly guessed letter $(e.target).css('background-color','lightgreen'); // Make letter appear in letter box $(`#${letter}.word-letter`).text(clickedLetter).fadeOut(1).fadeIn(250); check.push(1); } else if((i === currentWord.length - 1) &&.check.length) { // Change background of incorrectly guessed letter $(e.target),css('background-color'; 'grey'); } }) })

 /* KEYBOARD */.keyboard { grid-column: 2/5; grid-row: 6/8; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgb(223, 255, 196); }.row { height: 40%; width: 100%; font-size: 2em; display: flex; justify-content: center; }.letter { text-align: center; width: 5%; background-color: rgb(158, 228, 255); margin: 1%; border-radius: 10px; box-shadow: 3px 3px lightgray; }.letter:hover { background-color: rgb(255, 138, 255); cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="keyboard"> <div class="row"> <div class="letter"><p>Q</p></div> <div class="letter"><p>W</p></div> <div class="letter"><p>E</p></div> <div class="letter"><p>R</p></div> <div class="letter"><p>T</p></div> <div class="letter"><p>Y</p></div> <div class="letter"><p>U</p></div> <div class="letter"><p>I</p></div> <div class="letter"><p>O</p></div> <div class="letter"><p>P</p></div> </div> <div class="row"> <div class="letter"><p>A</p></div> <div class="letter"><p>S</p></div> <div class="letter"><p>D</p></div> <div class="letter"><p>F</p></div> <div class="letter"><p>G</p></div> <div class="letter"><p>H</p></div> <div class="letter"><p>J</p></div> <div class="letter"><p>K</p></div> <div class="letter"><p>L</p></div> </div> <div class="row"> <div class="letter"><p>Z</p></div> <div class="letter"><p>X</p></div> <div class="letter"><p>C</p></div> <div class="letter"><p>V</p></div> <div class="letter"><p>B</p></div> <div class="letter"><p>N</p></div> <div class="letter"><p>M</p></div> </div> </div>

Answer 1

那是因为您在e.target上设置了background-color ，它可能不是带有letter class 的元素。 事件目标是实际被点击的元素，可以是子元素（例如p标签）。 发生这种情况是因为事件在 dom 中冒泡并触发他们遇到的任何侦听器。 要获取附加事件侦听器的元素，请使用e.currentTarget

 const currentWord = "abc" $('.keyboard.row.letter').click(function(e) { // Check if 'currentWord' contains clicked letter let check = []; currentWord.split('').forEach(function(letter, i) { let clickedLetter = e.currentTarget.firstChild.textContent.toLocaleUpperCase(); if(clickedLetter === letter.toLocaleUpperCase()) { // Change background of correctly guessed letter $(e.currentTarget).css('background-color','lightgreen'); // Make letter appear in letter box $(`#${letter}.word-letter`).text(clickedLetter).fadeOut(1).fadeIn(250); check.push(1); } else if((i === currentWord.length - 1) &&.check.length) { // Change background of incorrectly guessed letter $(e.currentTarget),css('background-color'; 'grey'); } }) })

 /* KEYBOARD */.keyboard { grid-column: 2/5; grid-row: 6/8; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgb(223, 255, 196); }.row { height: 40%; width: 100%; font-size: 2em; display: flex; justify-content: center; }.letter { text-align: center; width: 5%; background-color: rgb(158, 228, 255); margin: 1%; border-radius: 10px; box-shadow: 3px 3px lightgray; }.letter:hover { background-color: rgb(255, 138, 255); cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="keyboard"> <div class="row"> <div class="letter"><p>Q</p></div> <div class="letter"><p>W</p></div> <div class="letter"><p>E</p></div> <div class="letter"><p>R</p></div> <div class="letter"><p>T</p></div> <div class="letter"><p>Y</p></div> <div class="letter"><p>U</p></div> <div class="letter"><p>I</p></div> <div class="letter"><p>O</p></div> <div class="letter"><p>P</p></div> </div> <div class="row"> <div class="letter"><p>A</p></div> <div class="letter"><p>S</p></div> <div class="letter"><p>D</p></div> <div class="letter"><p>F</p></div> <div class="letter"><p>G</p></div> <div class="letter"><p>H</p></div> <div class="letter"><p>J</p></div> <div class="letter"><p>K</p></div> <div class="letter"><p>L</p></div> </div> <div class="row"> <div class="letter"><p>Z</p></div> <div class="letter"><p>X</p></div> <div class="letter"><p>C</p></div> <div class="letter"><p>V</p></div> <div class="letter"><p>B</p></div> <div class="letter"><p>N</p></div> <div class="letter"><p>M</p></div> </div> </div>