JS的奇怪有关问题，大家可以帮忙分析下吗

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

本帖最后由 yi_piao 于 2015-06-21 12:07:16 编辑

来自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元素的内容中加入任何字符，哪怕加一个空格，结果就是正常的，请问问题出在哪里呢？
------解决思路----------------------
很多判断没有必要了，现在的浏览器都支持。
问题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;
        }
    }
}
------解决思路----------------------
var description=document.getElementById("description");
        if(description.firstChild.nodeType==3){
            description.firstChild.nodeValue=text;
        }

js 报错了吧

JS的奇怪有关问题，大家可以帮忙分析下吗

相关推荐