Home > Developer > JavaScript

Javascript + DOM programming Art: Example of the Art Museum (several implementations of separation of JS and document content)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Write an article to record my friends' methods to solve the problem. The function implemented by this JS is to click the tag. the IMG tag on the page displays the image corresponding to the tag link, the P label displays the text part of the label prompt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





The following are examples of JavaScript code that can be implemented by friends.


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);   }}


It can also run normally in the following format.






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


Add attributes to each link so that each href and title value will be included in the source and TXT attributes.




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;        }    }}








 

 
  
Use a closure to make links [I]. onclick is equal to the value of B returned by an anonymous function a. The value of source and text must be input to an anonymous function because of the closure (that is, the internal function can always obtain the variable of the peripheral function ), click the link and the internal function B is executed. When you find source and text, you can find the correct value.


 






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)    }}


Methods Used in books








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;}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
art of multiprocessor programming art of programming knuth art of programming donald knuth knuth art of computer programming art of computer programming pdf art of programming embedded systems donald knuth art of computer programming

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More