Question

I have some images and some span text on my page. Each image has his text and those elements are added dynamicaly with javascript.

Now, I would like to show the right message when mouseover on an image is detected.

It is not easy to explain, so here is the example:

var len = article_affiliations.length;
for (var affiliation_id = 0; affiliation_id < len; affiliation_id++)
{
    $('#country_warning' + affiliation_id).mouseover(function () {
        document.getElementById('country_warning_message' + affiliation_id)
            .style.visibility = 'visible';
    }).mouseout(function () {
        document.getElementById('country_warning_message' + affiliation_id)
            .style.visibility = 'hidden';
    }); 
}

The problem is that when the onmouseover function will be called, the affiliation_id will have the maximum value and the message will be shown near the last image, and not near the clicked one.

Thank you very much for your help.

Answer 1

Closure should do the trick:

for(var affiliation_id=0; affiliation_id<article_affiliations.length; affiliation_id++) {
    (function(i){
         $('#country_warning'+i).mouseover(function() {
              $('#country_warning_message'+i).css('visibility','visible');
         }).mouseout(function(){
              $('#country_warning_message'+i).css('visibility','hidden');
         });
    })(affiliation_id);
}