Question

尝试以两种方式运行此代码：

1）运行以下代码; 2）启用for循环然后运行它

<html>
<head>
<script>
    function toggle(){
        //console.log('hi');

        var samplediv = document.getElementById('samplediv');
        samplediv.innerHTML = '';

        var i = 1;
        //for(var i = 0; i < 3; ++i){
            samplediv.innerHTML +=
                "<div id=\'jh"+ i + "\'>Hi This is "+i+"</div>" +
                "<div id=\'edit"  + i +  "\' style=\'display:none\'>Edit "+i+"</div>" ;
                document.getElementById('jh'+i).addEventListener("click", function(){document.getElementById('edit'+i).style.display="block";});
            /*
            (function(i){
                //console.clear();
                var key = i;
                i += "";
                document.getElementById('jh0').addEventListener("click", function(){document.getElementById('edit0').style.display="block";});
                //document.getElementById('jh'+key).addEventListener("click", function(){document.getElementById('edit'+key).style.display="none";}, true);
                //console.log(i, key);
            }(i));
            */
        //}
    }
</script>
</head>
<body>
<div id="samplediv" >over here</div>

<script>toggle();</script>
</body>

</html>

我尝试使用for在每个div上添加addEventLister。我确定这是一种引用错误的调用。我知道有一些方法可以添加on属性方法等事件。另外，添加一些类似的监听器是低效的，但我必须按照你的意见制作它们。

我已经制作了一个IIFE来使密钥成为一个价值但却失败了。你有什么想法解决这个问题吗？（请不要jQuery）

Answer 1

JSFiddle

您将更改用于添加新元素的方法。我为每个新项目替换了innerHTML +=到document.createElement。

var jh = document.createElement('div');
jh.id = 'jh'+i;
jh.innerText = 'Hi This is '+i;

var edit = document.createElement('div');
edit.id = 'edit'+i;
edit.style.display = 'none';
edit.innerText = 'Edit '+i;

samplediv.appendChild(jh).appendChild(edit);

i事件上的变量click显示最后一个值，因此您必须从其他来源获取索引（例如，来自id）。

document.getElementById('jh'+i).addEventListener("click", function(){

    var jhIndex = this.id.split('jh')[1];
    document.getElementById('edit'+jhIndex).style.display= 'block';
});

javascript（编辑）中的按引用调用错误

1 个答案: