Javascript+Dom编程艺术：美术馆例题（将js与文档内容分离的几种实现）

本文链接：https://blog.csdn.net/nanshuiwuyu/article/details/6663851

写篇文章把朋友们帮我解决问题的集中方法记录下来，该js实现的功能就是点击a标签，页面中的img标签显示a标签链接所对应的图片，p标签显示a标签提示文字部分。

<!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=gb2312" />
<title>Image Gallery</title>
<script type="text/javascript" src="js/js6.js">
</script>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
    </li>
  </ul>
  <img id="imgholder" src="images/placeholder.gif" alt="my image gallery" />
  <p id="description">Choose an image.</p>
</body>
</html>

以下是朋友们分享的可以实现功能的js

MuBeiBei

window.οnlοad=prepareGallery;
function prepareGallery(){
    if (!document.getElementsByTagName ||!document.getElementById) return false;
    if (!document.getElementById("imagegallery") ) return false;
    var gallery=document.getElementById("imagegallery");
    var links=gallery.getElementsByTagName("a");
    for ( var i=0;i<links.length;i++){
        var source=links[i].getAttribute("href");
        var text=links[i].getAttribute("title");
        !function(i){
        links[i].οnclick=function(){        
            var img_holder=document.getElementById("imgholder");
            var description=document.getElementById("description");
            img_holder.setAttribute("src",this.href);
            description.firstChild.nodeValue=this.title;
            return false;
        }
        }(i)
    }
}

t5500

window.οnlοad=prepareGallery;
function prepareGallery(){
	if (!document.getElementsByTagName ||!document.getElementById) return false;
	if (!document.getElementById("imagegallery") ) return false;
	var gallery=document.getElementById("imagegallery");
	var links=gallery.getElementsByTagName("a");
	for ( var i=0;i<links.length;i++){
        links[i].οnclick=function(){        
		var img_holder=document.getElementById("imgholder");
		var description=document.getElementById("description");
		img_holder.src=,this.href;
		description.innerHTML=this.title;
		return false;
        }
    }
}

slowhand

window.οnlοad=prepareGallery;
function prepareGallery(){
	
	if (!document.getElementsByTagName ||!document.getElementById) return false;
	if (!document.getElementById("imagegallery") ) return false;
	var gallery=document.getElementById("imagegallery");
	var links=gallery.getElementsByTagName("a");
	for ( var i=0;i<links.length;i++){
		var source=links[i].getAttribute("href");
		var text=links[i].getAttribute("title");
        links[i].οnclick=(function(img_src, img_txt){
          return function(){
            var img_holder=document.getElementById("imgholder");
            var description=document.getElementById("description");
            img_holder.setAttribute("src",img_src);
            description.firstChild.nodeValue=img_txt;
            return false;
          }
        })(source, text);

   }
}

写成下面的形式，也是可以正常运行的。

window.οnlοad=prepareGallery;
function prepareGallery(){
	if (!document.getElementsByTagName ||!document.getElementById) return false;
	if (!document.getElementById("imagegallery") ) return false;
	var gallery=document.getElementById("imagegallery");
	var links=gallery.getElementsByTagName("a");
	for ( var i=0;i<links.length;i++){
        links[i].οnclick=function(){        
		var img_holder=document.getElementById("imgholder");
		var description=document.getElementById("description");
		img_holder.setAttribute("src",this.href);
		description.firstChild.nodeValue=this.title;
		return false;
        }
    }
}

idamag

给每个链接添加属性，这样每次的href与title值将会被存在source与txt属性中。

window.οnlοad=prepareGallery;
function prepareGallery(){
    if (!document.getElementsByTagName ||!document.getElementById) return false;
    if (!document.getElementById("imagegallery") ) return false;
    var gallery=document.getElementById("imagegallery");
    var links=gallery.getElementsByTagName("a");
    for ( var i=0;i<links.length;i++){
        links[i].source=links[i].getAttribute("href");
        links[i].txt=links[i].getAttribute("title");
        links[i].οnclick=function(){        
            var img_holder=document.getElementById("imgholder");
            var description=document.getElementById("description");
            img_holder.setAttribute("src",this.source);
            description.firstChild.nodeValue=this.txt;
            return false;
        }
    }
}

用闭包，令links[i].onclick 等于一个匿名函数A执行所返回的函数B，匿名函数要传入source和text值，由于闭包的原因（即内部函数始终能获得外围函数的变量），点击链接，内部函数B被执行，去找source和text的时候，就能找到正确的值。

window.οnlοad=prepareGallery;
function prepareGallery(){
    if (!document.getElementsByTagName ||!document.getElementById) return false;
    if (!document.getElementById("imagegallery") ) return false;
    var gallery=document.getElementById("imagegallery");
    var links=gallery.getElementsByTagName("a");
    for ( var i=0;i<links.length;i++){
        var source=links[i].getAttribute("href");
        var text=links[i].getAttribute("title");
        links[i].onclick = (function(s,t){
            return function(){
              var img_holder=document.getElementById("imgholder");
              var description=document.getElementById("description");
              img_holder.setAttribute("src",s);
              description.firstChild.nodeValue=t;
              return false;
            }

        })(source,text)
    }
}

书本上使用的方法

window.οnlοad=prepareGallery;
function prepareGallery(){
	
	if (!document.getElementsByTagName ||!document.getElementById) return false;
	if (!document.getElementById("imagegallery") ) return false;
	var gallery=document.getElementById("imagegallery");
	var links=gallery.getElementsByTagName("a");
	for ( var i=0; i<links.length; i++ ) {
		links[i].onclick = function(){
			showImg(this);
			return false;
		}
	}		
}

function showImg(whichimg)
{
	var source=whichimg.getAttribute("href");
	var img_holder=document.getElementById("imgholder");
	img_holder.setAttribute("src",source);
	var text=whichimg.getAttribute("title");
	var description=document.getElementById("description");
	description.firstChild.nodeValue=text;
}