DOM编程艺术中的案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM编程艺术图片库</title> </head> <body> <h1>Snapshots</h1> <ul> <li><a href="images/5.jpg" onclick="showPic(this); return false;">china map</a></li> <li><a href="images/2.jpg" onclick="showPic(this); return false;">words</a></li> <li><a href="images/3.jpg" onclick="showPic(this); return false;">html</a></li> <li><a href="images/4.jpg" onclick="showPic(this); return false;">friends</a></li> </ul> <img id="placeholder" src="images/1.jpg" alt="my image"> <script src="js/showPic.js"></script> </body> </html>
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute("src",source);
}效果能实现,就是这个函数传参有点不太明白,望有人能解答的详细的.
自由的气息浏览 2128回答 3
3回答
-
清风流光
你读编程的艺术应该看到抽象化这个词了吧，参数相当于数学里自定义的x，x.getAttribute('href'),假设我们不知道要得到谁的属性，将他假设成x，来完成当前函数，之后再去调用。 -
慕粉1440489053
this指向当前调用函数的a元素function showPic(whichpic) { var source = whichpic.getAttribute("href");//获取这个a元素的href属性 可以写成 var source = whichpic.href; var placeholder = document.getElementById('placeholder'); placeholder.setAttribute("src",source); //把placeholder的 src 替换成这个a元素的href placeholder.src = source; } -
西兰花伟大炮
this就是你当前事件所在的标签，也就是a节点，知道这个就好理解了
随时随地看视频慕课网APP
Html/CSS
JavaScript