寫篇文章把朋友們幫我解決問題的集中方法記錄下來,該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.onload=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].onclick=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.onload=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(){ var img_holder=document.getElementById("imgholder");var description=document.getElementById("description");img_holder.src=,this.href;description.innerHTML=this.title;return false; } }}
slowhand
window.onload=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(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.onload=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(){ 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.onload=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].onclick=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.onload=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.onload=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;}