這是非常基本的。我正在嘗試對各種 addEventListener 場景進行建模以簡單地更改 css 樣式元素。
這是html
<ul>
<li>bullet 1</li>
<li>bullet 2</li>
</ul>
這是javascript
const giraffe = document.querySelector("li");
giraffe.addEventListener("click", myFunc);
function myFunc(){
giraffe.style.backgroundColor = "#f00";
}
我試圖理解這種行為。
- 為什么這僅在您單擊第一個 li 時才有效（單擊第二個時沒有任何反應）
- 為什么單擊一個 li 時所有 lis 不變色
總新手。我只是了解箭頭函式并且可以閱讀匿名函式，但如果你能拼出任何額外的函式，我發現它更容易理解
uj5u.com熱心網友回復：
這是因為查詢選擇器只選擇符合條件的第一個出現。考慮在 HTML 元素上添加 ID 并相應地選擇它們。
uj5u.com熱心網友回復：
盡管您有多個類似的元素，querySelector但始終只應用于第一個元素。這也是為什么您的樣式僅適用于giraffe第一個元素的原因。
如果您希望將單擊事件和樣式應用于所有相似元素，則應使用querySelectorAlland 回圈forEach來逐個更改元素。
const giraffes = document.querySelectorAll("li");
giraffes.forEach(giraffe => giraffe.addEventListener("click", myFunc));
function myFunc(){
giraffes.forEach(giraffe => giraffe.style.backgroundColor = "#f00");
}<ul>
<li>bullet 1</li>
<li>bullet 2</li>
</ul>uj5u.com熱心網友回復：
它僅適用于第一個，因為它的行為是
document.querySelector回傳檔案中與指定選擇器或選擇器組匹配的第一個元素。如果您希望它影響li您應該考慮使用的所有元素document.querySelectorAll那是因為 click 事件僅附加到第一個 li 元素，并且此代碼：
giraffe.style.backgroundColor = "#f00";正在更改該元素的背景顏色。
您可以使用以下代碼段改進您的代碼。
const lis = document.querySelectorAll('li');
lis.forEach(li => {
li.addEventListener('click', () => {
li.style.backgroundColor = "#f00";
})
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497312.html
標籤：javascript css