Javascript 动态创建的 Div

Question

这是一个简单的 javascript 代码。我在脚本中创建了 5 个 div，并为每个 div 填充了一个 'onclick' 事件。但是，所有这些都给我最后一个的 ID。知道为什么会发生这种行为吗？非常感谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Page</title>
    <style type="text/css">
        .divImgPoint {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            margin-left: 5px;
            margin-right: 5px;
            border: ridge 2px #c73756;
        }

        .divTest {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 200px;
            left: 100px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        function createNewDivs() {
            var divFixed = document.getElementById('divFixed');
            var newDiv;

            for (xI = 0; xI < 5; xI++) {
                newDiv = document.createElement('div');
                newDiv.id = "newDiv_" + xI;
                newDiv.className = "divImgPoint";
                newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
                divFixed.appendChild(newDiv);
            }
        }
    </script>
</head>
<body>
    <div id="divFixed">
    </div>
</body>
</html>
<script type="text/javascript">
    window.addEventListener('load', () => { createNewDivs(); });
</script>

Answer 1

将 let newDiv; 放入循环中。

喜欢

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Page</title>
    <style type="text/css">
        .divImgPoint {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            margin-left: 5px;
            margin-right: 5px;
            border: ridge 2px #c73756;
        }

        .divTest {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 200px;
            left: 100px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        function createNewDivs() {
            var divFixed = document.getElementById('divFixed');
            

            for (xI = 0; xI < 5; xI++) {
                let newDiv;
                newDiv = document.createElement('div');
                newDiv.id = "newDiv_" + xI;
                newDiv.className = "divImgPoint";
                newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
                divFixed.appendChild(newDiv);
            }
        }
    </script>
</head>
<body>
    <div id="divFixed">
    </div>
</body>
</html>
<script type="text/javascript">
    window.addEventListener('load', () => { createNewDivs(); });
</script>

Javascript 动态创建的 Div

Javascript dynamically created Divs

html

javascript

dynamic-programming