<div id="content">
<ul id="movielist">
<li><a href="a.jpg" onclick="f(this);return false">a</a></li>
<li><a href="b.jpg" onclick="f(this);return false">b</a></li>
<li><a href="c.jpg" onclick="f(this);return false">c</a></li>
<li><a href="d.jpg" onclick="f(this);return false">d</a></li>
<li><a href="e.jpg" onclick="f(this);return false">e</a></li>
</ul>
<img src="placeholder.jpg" id="placeholder" alt="show picture here">
</div>
就在上面这个 html 里,我想通过点击标签在当前页面显示图片
思路是替换
<script>
function f(picture){
var source=picture.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
现在我想通过事件代理来实现这个功能,但是一直代理不到
var ul=document.getElementById("movielist");
var li=ul.childNodes;
for(var i=0;i<li.length;i++){
var a=li[i].getElementsByTagName("a");
ul.addEventListener("click",function(){
let source=a.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
},false)
}
请问我应该怎么改?谢谢
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.