Geek asks and answers

Javascript Complete all tags, add onclick to each of them.

I have a list of links pointing to images, and a js function that accepts the URL (s) and places that image on the page when the function is called.

I originally added inline onlick = "showPic (this.getAttribute ('href')) for each a, but I want to highlight inline js. Here is my func for adding onclick to each tag when the page loads:

function prepareLinks(){
var links = document.getElementsByTagName('a');
for(var i=0; i<links.length; i++){
    var thisLink = links[i];
    var source = thisLink.getAttribute('href'); 
    if(thisLink.getAttribute('class') == 'imgLink'){
        thisLink.onclick = function(){
            showPic(source);
            return false;
        }
    }
}
}

function showPic(source){
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src',source);
}

window.onload = prepareLinks();

... but every time showPic is called, the var source is the href of the last image. How can I make every link have the correct onclick?

+3
source share
4 answers

. , , . , var annon. onclick ( href ). , a- "imgLink", HTML, inline onclick- ( ). "return! ShowPic (this.href)"; .

:

function showPic(source){
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src',source);
return true;
}

function prepareLinks() {
if(!document.getElementById('imgLinks')){ return false; };
var galLinks = document.getElementById('imgLinks');
var links = galLinks.getElementsByTagName('a');
for(var i=0; i<links.length; i++) {
    var thisLink = links[i];
    thisLink.onclick = function() {
        return !showPic(this.href);
    };
}
}

window.onload = function(){
prepareLinks();
}
0

JavaScript , , . , :

function prepareLinks() {
    var links = document.getElementsByTagName('a');
    for(var i = 0; i < links.length; i++) {
        var thisLink = links[i];
        var source = thisLink.getAttribute('href'); 
        if(thisLink.getAttribute('class') == 'imgLink') {
            thisLink.onclick = (function(source) {
                return function() {
                    showPic(source);
                    return false;
                };
            })(source);
        }
    }
}

, this:

function prepareLinks() {
    var links = document.getElementsByTagName('a');

    for(var i = 0; i < links.length; i++) {
        var thisLink = links[i];

        if(thisLink.getAttribute('class') == 'imgLink') {
            thisLink.onclick = function() {
                showPic(this.href);
                return false;
            };
        }
    }
}

, IE5, IE6, , , =)

+4

Minitech , , source onclick

, , , . , , . - .

function interceptLinks() {
   // Bad way to set onclick (use a library)
   document.onclick = function() {
     if (this.tagName.toUpperCase() != 'A' ) {
       return;
     }
     // Bad way to check if it contains a class (use a library)
     if (this.getAttribute('class') == 'imgLink') {
       showPic(this.getAttribute('href'));
       return false;
     }
   }
}
+2

, .

source click, ​​ href - .

, .

The simplest but not supported by many browsers is to use let, which allows you to use the block area.

let source = thisLink.getAttribute('href');

jsFiddle . It worked in Firefox, but not in Chrome.

In 2038, when we are dealing with the problem of 2038 , and all browsers have implemented ES6, this will be the standard way to fix this problem.

A more complicated method to understand and implement, compatible with all browsers, is to break the closure with a pattern such as ...

thisLink.onclick = (function(src) {
  return function(){
            showPic(src);
            return false;
        }
})(source);

jsFiddle .

0
source

More articles:


All Articles