addEventListener 和 removeEventListener 使用 forEach

Question

為什么“div [1]”有效，為什么“div.nextElementSibling”無效，因為在console.log 中，當forEach 方法處理第一個div 時，它們的顯示相同

<--HTML-->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script defer src="main.js"></script>
</head>
<body>
    <div class='div'>first</div>
    <div class='div'>second</div>
</body>
</html>

<--JS-->

const divs = document.querySelectorAll('.div')

divs.forEach((div, id) => {

    const clg = () => { 

        console.log(id)

        //it works
        divs[1].removeEventListener('click', clg)

        //it doesn't
        div.nextElementSibling.removeEventListener('click', clg)

    }

    div.addEventListener('click', clg)

    //this DOM's elements for div1 are the same
    console.log(divs[1],div.nextElementSibling)
})

Answer 1

這是因為，無論哪個循環在 forEach 循環中運行， divs[1] 將始終顯示固定值。

由於 div 包含 2 個元素

<div class='div'>first</div>
<div class='div'>second</div>

因此，對於 forEach 循環的每個循環，div 值都會發生變化，並且 divs[1] 是一個固定值，即

<div class='div'>second</div>

現在控制台日志

// Cycle 0
// Console.log(divs[1])
<div class='div'>second</div>
// Console.log(div.nextElementSibling)
<div class='div'>second</div>

// Cycle 1
// Console.log(divs[1])
<div class='div'>second</div>
// Console.log(div.nextElementSibling)
null

addEventListener 和 removeEventListener 使用 forEach

問題描述

1 個解決方案

解決方案1
2 2020-04-18 14:45:26

addEventListener 和 removeEventListener 使用 forEach

問題描述

1 個解決方案

解決方案1 2 2020-04-18 14:45:26

解決方案1
2 2020-04-18 14:45:26