写篇文章把朋友们帮我解决问题的集中方法记录下来,该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>
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;
}
}
}
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;
}
}
}
给每个链接添加属性,这样每次的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;
}