大家看一下这段代码,从昨天到现在一直不知道问题出在哪里。我本来是想做类似于相册的那种功能,就是下面一排缩略图,点其中一张就在上面就显示缩略图的原图片(像腾讯、网易那种),但是现在点了之后原图片显示出来了,但是下面的缩略图还有其他的标题什么的都不见了,问题出在哪里呢???<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Scripting代码相册</title>
<style type="text/css">
#thumbnail li {
float:left;
}
</style>
<script type="text/javascript">
function addEventSimple(obj, evt, ftn){
if(obj.addEventListener){
obj.addEventListener(evt, ftn, false);
}
else if(obj.attachEvent){
obj.attachEvent("on"+evt, ftn);
}
}
addEventSimple(window, "load", init);
function init(){
var imgList = document.getElementById("thumbnail");
var aList = imgList.getElementsByTagName("a");
for(var i=0; i<aList.length; i++){
addEventSimple(aList[i],"click",showSnapshot);
}
var snapshot = document.createElement("img");
snapshot.setAttribute("src","img/placeholder.gif");
snapshot.setAttribute("id", "imgsnap");
snapshot.setAttribute("alt", "My Image Gallery");
var comment = document.createElement("p");
comment.setAttribute("id","comment");
var commentText = document.createTextNode("Choose an image");
comment.appendChild(commentText);
var ul = document.getElementById("thumbnail");
ul.parentNode.insertBefore(snapshot,ul);
ul.parentNode.insertBefore(comment,ul);
}
function showSnapshot(){
var imgsnap = document.getElementById("imgsnap");
imgsnap.setAttribute("src",this.href);
var comment = document.getElementById("comment");
comment.firstChild.nodeValue = this.title;
}
</script>
</head><body>
<h1 id="snapshot">Snapshots</h1>
<ul id="thumbnail" style="list-style-type:none">
<li>
<a href="img/bigben.jpg" title="This is a bigben">
<img src="img/thumbnail_bigben.jpg" alt="thumbnail_bigben" />
</a>
</li>
<li>
<a href="img/fireworks.jpg" title="This is a fireworks">
<img src="img/thumbnail_fireworks.jpg" alt="thumbnail_fireworks" />
</a>
</li>
<li>
<a href="img/coffee.jpg" title="This is a coffee">
<img src="img/thumbnail_coffee.jpg" alt="thumbnail_coffee" />
</a>
</li>
<li>
<a href="img/rose.jpg" title="This is a rose">
<img src="img/thumbnail_rose.jpg" alt="thumbnail_rose" />
</a>
</li>
</ul>
</body>
</html>

解决方案 »

  1.   


    在 init 方法里创建了一个 id 为 snapshot 的图片对象和 id 为 comment 的文本节点用于显示图片的说明。
    看你的代码没什么问题。问题出在一个很有意思的地方,发现没,当你点击缩略图时,你 h1 的内容都没有了?甚至地址栏的 URL 也变了?
    是的,因为当你点击下面带链接的图片时,页面被 a 链接导航走了!
    好,现在来解决你的问题:把你的 init 方法中第一个 for 循环处做如下修改:    var aHref;
        for(var i=0; i<aList.length; i++){
            addEventSimple(aList[i],"click",showSnapshot);
    aHref = aList[i].href;
    aList[i].setAttribute('src', aHref);
    aList[i].href = "javascript:;";
        }
    把你的 showSnapshot 方法的第二行做如下修改:    imgsnap.setAttribute("src",this.getAttribute('src'));现在试试
      

  2.   

    厉害!非常感谢!追问一个小问题,
    var imgsnap = document.getElementById("imgsnap");
        imgsnap.setAttribute("src",this.href);
    这个我是为了在设置img元素的src,为什么还会导向了“this.href”页面呢?
      

  3.   

    因为图片被 a 包住了,点击时 a 的点击事件也被触发,而 a 默认就是用来导航的,一旦它有  href ,就会被导航走