猿问

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);
}

效果能实现,就是这个函数传参有点不太明白,望有人能解答的详细的.

自由的气息
浏览 2170回答 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
我要回答