JS的奇怪问题,大家可以帮忙分析下吗?

yi_piao 2015-06-21 12:04:04
来自DOM Script2的示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href="css/layout.css" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="1.jpg" title="chenduling1">
<img src="trumbnail1.png" alt="sweetie1" />
</a>
</li>
<li>
<a href="2.jpg" title="chenduling2">
<img src="trumbnail2.png" alt="sweetie1" />
</a>
</li>
<li>
<a href="3.jpg" title="view picture1">
<img src="trumbnail3.png" alt="sweetie1" />
</a>
</li>
<li>
<a href="4.jpg" title="view picture2">
<img src="trumbnail4.png" alt="sweetie1" />
</a>
</li>
</ul>
<img id="placeholder" />
<p id="description"></p>
<script src="js/me.js"></script>
</body>
</html>


function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
if(placeholder.nodeName!="IMG") return false;
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
var description=document.getElementById("description");
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
}
return true;
}

function prepareGallery(){
if(!document.getElementsByTagName) return;
if(!document.getElementById) return;
if(!document.getElementById("imagegallery")) return;
var gallery=document.getElementById("imagegallery");
var links=gallery.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
return showPic(this)?false:true;
}
}
}

window.onload=prepareGallery;


问题:本来是希望点击缩略图在同一页面id="placeholder"的img元素中显示相关的大图片,可是总是会跳到一个新的页面去,但是如果我把id="description"的p元素的内容中加入任何字符,哪怕加一个空格,结果就是正常的,请问问题出在哪里呢?
...全文
238 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
hch126163 2015-06-21
  • 打赏
  • 举报
回复
var description=document.getElementById("description"); if(description.firstChild.nodeType==3){ description.firstChild.nodeValue=text; } js 报错了吧
孟子E章 2015-06-21
  • 打赏
  • 举报
回复
很多判断没有必要了,现在的浏览器都支持。 问题1: 点击a标签,都要return false,否则就会打开href的链接 问题2:如果 <p id="description"></p> 里面没内容,description.firstChild 是null,下面的操作就报告脚本错误了。 你可以这样 function showPic(whichpic){ var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; var description=document.getElementById("description"); description.innerHTML=text; } function prepareGallery(){ if(!document.getElementsByTagName) return; if(!document.getElementById) return; if(!document.getElementById("imagegallery")) return; var gallery=document.getElementById("imagegallery"); var links=gallery.getElementsByTagName("a"); for(var i=0;i<links.length;i++){ links[i].onclick=function(){ showPic(this); return false; } } }

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧