一个单的操作JS切换图片的成果

写法1：

<section> <h2>JS切换图片</h2> <ul> <li><a href="http://www.mamicode.com/img/1.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/1.jpg" ></a></li> <li><a href="http://www.mamicode.com/img/2.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/2.jpg" ></a></li> <li><a href="http://www.mamicode.com/img/3.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/3.jpg" ></a></li> <li><a href="http://www.mamicode.com/img/4.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/4.jpg" ></a></li> </ul> <p>图片描述</p> <img src="http://www.mamicode.com/https:/b-ssl.duitang.com/uploads/item/201408/04/20140804204624_xSeGA.png" alt="img fult"> </section> function showPic(whichpic){ //转变图片 var source = whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); //转变图片描述 function showPic_description(){ var text=whichpic.getAttribute("title"); var pic_desciption=document.getElementById("pic_desciption"); pic_desciption.childNodes[0].nodeValue=text; }; };

写法2：

<section> <h2>JS切换图片</h2> <ul> <li><a href="http://www.mamicode.com/img/1.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/1.jpg" ></a></li> <li><a href="http://www.mamicode.com/img/2.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/2.jpg" ></a></li> <li><a href="http://www.mamicode.com/img/3.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/3.jpg" ></a></li> <li><a href="http://www.mamicode.com/img/4.jpg" title="this picture is beautiful"><img src="http://www.mamicode.com/img/4.jpg" ></a></li> </ul> <p>图片描述</p> <img src="http://www.mamicode.com/https:/b-ssl.duitang.com/uploads/item/201408/04/20140804204624_xSeGA.png" alt="img fult"> </section> window.onload=prepareGallery; function prepareGallery(){ //找到图片集 var gallery=document.getElementById("img_gallert"); // 图片集的a元素节点 var link=gallery.getElementsByTagName("a"); // 遍历节点 for(var i=0;i<link.length;i++){ link[i].onclick=function(){ showPic(this); return false; } } }; function showPic(whichpic){ //转变图片 var source = whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); };

虽然成果都一样，但是写法2却更好JS不会因为HTML里的代码转变了，，就导致无法执行。
好的JS应该与HTML标签是疏散的。后期维护越发便利

它的JS与HTML标签是疏散的吗