<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 里,我想通过点击标签在当前页面显示图片 思路是替换的 src 属性;
<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)
}
请问我应该怎么改?谢谢
1
rabbbit 2018-04-14 19:29:21 +08:00 1
var aArr = document.querySelectorAll("#movielist li a");
for(var i = 0;i < aArr.length;i++){ aArr[i].addEventListener("click", function(eve){ placeholder.setAttribute("src",this.href); eve.preventDefault(); }); } |
2
emric 2018-04-14 19:54:06 +08:00
代理的方法错了。楼主应该是后端吧,jQeury 还是很好用的。
https://gist.github.com/17/7930e51a16c4139be010408861023175 |
3
rabbbit 2018-04-14 19:58:03 +08:00
唔,一楼那个是错的,没看着事件代理
var movielist = document.querySelector("#movielist"); movielist.addEventListener("click", function(eve){ if (eve.target.nodeName === "A") { placeholder.src = eve.target.href; eve.preventDefault(); } }); |
4
mikac 2018-04-15 12:05:35 +08:00
弱弱地问一句: 什么是事件代理 :(
|
5
enginex 2018-04-15 22:15:37 +08:00
个人感觉使用 data-属性来添加自定义数据,语义上比 herf 要好,href 可以给"javascript:void(0)"
|
8
Departures OP @rabbbit 请问 placeholder 没有申明为什么也可以直接用啊?
|