Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery hover over an array of thumbnails problem

    Hi,
    I'm having problems with a function and not sure what the answer is. The function is as follows:

    Code:
    function display (array) {
    	for (i=0, max = array.length; i<max; i++){	
    		var galleryTitle=array[i][3];
    		var gallerySize=array[i][2];
    		var galleryDate=array[i][1];
    		var galleryDescription=array[i][4];
    		
    		$('#container').append(
    		
    		'<div id="'+array[i][0]+'" style="position: absolute;  left:'+array[i][6]+'px; top: '+array[i][7]+'px;"><a href="#"><img src=images/'+array[i][5]+'></a></div>'
    		);
    		
    		$("#"+i).hover( 
    			function () { 
    				$(this).append('<div id="description"><b>Title: </b>'+galleryTitle+'<br /><b>Images: </b>'+gallerySize+'<br /><b>Date: </b>'+galleryDate+'<br /><br />'+galleryDescription+'</div>');
    			},  	
    
    			function () { 
        			$(this).find("div:last").remove(); 
    			} 
    		);
    	}
    }
    What I'm trying to do is cause a css box to appear with information about a thumbnail in it, whenever that particular thumbnail is hovered over.

    The information and, indeed, the urls of the thumbnails are stored in an array at the start of the script.

    The code above works and the css box appears *except* whichever thumb I hover over, only information about the thumbnail identified by the last iteration (is that the right word?) of the for loop appears.

    I understand why this is happening (ie, the loop is finished by the time the hover statement comes into being and so 'i' will always be set to the last value) but I can't work out what to do about it. I've tried inserting get element by id calls within the first div but this just seems to knock out the entire script.

    I'm happy to post the script in its entirety up here if that helps but thought I;d just hit you all with the bare minimum first.

    Any ideas where I should be heading on this?

    Many thanks
    Stef

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Yes, you analyzed the situation correctly. This is known as the "closure inside a loop" problem. By the time of the execution of the closure, the surrounding scope has already finished executing and its state is that of the last loop.

    Generally you can circumvent this problem by inducing a self-executing function, hand over the volatile parameters to it and return a function reference to be called on callback.

    e.g.
    Code:
    for(i=0; i<whatever.length; i++) {
       $('#thatelement' + i).click(function() {
          alert(i);   // this will always be equal to whatever.length
       });
    }
    will become
    Code:
    for(i=0; i<whatever.length; i++) {
       $('#thatelement' + i).click((function(_i) {
          return function() {
             alert(_i);  // this will be counting from 0 to whatever.length-1 ... depending on
                           // the loop state ... using a "double closure effect"
          }
       })(i));
    }
    Btw. id attributes must start with a letter. id's like id="1" or similar are illegal and might lead to problems with some browsers.
    Last edited by devnull69; 03-05-2012 at 09:44 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •