极客观点
项目管理
HarmonyOS
//HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Imager Gallery</title>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="Images/Gaki.jpg" title="Gaki Display"><img src="Images/Gaki.jpg" alt="Gaki"></a>
</li>
<li>
<a href="images/Twe.jpg" title="back to twenty-four"><img src="images/Twe.jpg" alt="Twe"></a>
</li>
<li>
<a href="images/Kur.jpg" title="Fit stone"><img src="images/Kur.jpg" alt="Kur"></a>
</li>
<li>
<a href="images/Name.jpg" title="whats your name"><img src="images/Name.jpg" alt="Name"></a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
<p id="description">Choose a image.</p>
<script type="text/javascript" src="scripts/showPic.js"> </script>
</body>
</html> //JS代码
//共享onload事件
function addLoadEvent(func){
var oldonload = window.onload; //将onload存进 变量oldload
if (typeof window.onload !='function'){ //如果没有绑定任何函数，就像平时那样把新函数添加给它
window.onload = func;
}else {
window.onload = function(){ //如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);//调用函数
function prepareGallery(){
if (!document.getElementsByTagName) return false; //check 有无tagname function
if (!document.getElementById) return false; //check 有无ID function
if (!document.getElementById("imagegallery")) return false; //check 有无imagegallery的id tag
var gallery = document.getElementById("imagegallery"); //将imagegallery标签赋值给gallery
var links = gallery.getElementsByTagName("a"); //将获取的a标签赋值给links
for ( var i = 0; i < links.length; i++){ //遍历a标签 赋予每个节点onclick事件
links[i].onclick = function(){
return showPic(this) ? false : true; //this之links[i] if 成功 执行false指令，即不跳到新窗口；否则true，打开新窗口
}
}
}
//点击图片，可以在当前页面切换图片
function showPic(whichpic){
if (!document.getElementById("placeholder")) return false; //check 有无placeholder
var source = whichpic.getAttribute("href"); //获取href的属性给参数whichpic并赋给变量source
var placeholder = document.getElementById("placeholder"); //获取id "placeholder" 并赋值
if (!placeholder.nodeName != "IMG") return false; //check placeholder是否图片 return false 指的是请离开 通俗理解：如果不是，请离开
placeholder.setAttribute("src",source); //将placeholder的src属性设置成source的值
if (document.getElementById("description")){ //检查标签是否存在
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //检查title是否存在，存在赋值，不存在赋空值
var description = document.getElementById("description"); //get 赋值变量
if (description.firstChild.nodeType == 3){ //check nodeType 是否是3
description.firstChild.nodeValue = text;
}
}
return false;
}
Q：书中要求实现图片在当前窗口完成替换操作，达到图片库的效果，但每次都是会用新窗口打开，请问上面的代码哪里出了问题？
showPic函数里面有两个地方需要修改
1、
if (!placeholder.nodeName != "IMG") return false;这里前面多了个!2、最后的
return false;应该改为return true;，这样onclick里才能return false;，才能阻止默认(a标签点击跳转页面)。