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元素的内容中加入任何字符，哪怕加一个空格，结果就是正常的，请问问题出在哪里呢？

...全文

229 2 打赏收藏举报

写回复

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