A wacko on click function?

[Texas]

So, I'm re-writing a lot (well, all of it actually) of the Gold Shop plugin I wrote a while back. And to make a long story short I ran into a problem.

The items that are bought are displayed on the users profile. When the items (images) have title properties so that there names, id's, descriptions etc. will be displayed when the item is hovered over. Now, a lot of people like to write extremely long descriptions, sometimes so long that you can't even see the whole tooltip. So, I made it so that only the first 100 characters would show up, then, when the user clicked on the item, the name and description would come up in a proboards.alert. So, this worked in the old code.


for( i=0; i<display_items.length; i++){ // loop through users items
   for( x=0; x<items.length; x++){ // loop through shop items
       var sliced = '';
       var description = items[x].description;
       if( description.length > 100 ){
           // slice off nearest space after 100 characters are removed
           sliced = description.slice(0 , 100);
           sliced = sliced.slice(0 , sliced.lastIndexOf(' ') ) + '... (Right click to view more)';
       }
       if( display_items[i]['#'] == items[x].item_id ){
           // check to make sure the item to be displayed and the item in the shop are the same
           // ---V  Add the item with the sliced description in the title
           $('#display').append('<img title="' + ( ( sliced == "" )? description : sliced ) + '" style="max-height: 100px; max-width: 100px" class="' + items[x].item_id + '" src=' + items[x].image_of_item + '></img>');

           var id = items[x].item_id;          
           var name =  ( items[x].item_name != 'undefined' )? items[x].item_name : '';
           $('.' + items[x].item_id).rightClick(function(){ // alert on right click
               proboards.alert( 'Name: ' + name + '<br /><br />' + 'Description: ' + description + '<br /><br />' + 'ID: ' + id );
           });
       }
   }
}


But the new version which is basically identical does not work.


           for ( i = 0; i < data.b.length; i++ ) {

               for ( x = 0; x < items.length; x++ ) {

                   
                   var description = items[x].description;
                   var sliced = "";

                   if( description.length > 20 ){

                       sliced = description.slice(0 , 100);

                       sliced = sliced.slice(0 , sliced.lastIndexOf(' ') ) + '... (Click to view more)';

                   }

                   if ( data.b[i] == items[x].item_id ) {

                       $( '#shelf' ).append( '<img style="max-width: 70px; max-hieght: 70px;" class="' + data.b[i] + '" src="' + items[x].image_of_item + '"></img>' )

                       var name = items[x].item_name;
                           
                       $( '.' + items[x].item_id ).click(function (){
                           
                           proboards.alert( 'Name: ' + name + '<br /><br />Description: ' + description );
                           
                       } );

                       $('.' + items[x].item_id + ':last').attr('title', "Name: " + items[x].item_name + '\n' + "Description: " + ( ( sliced != "" )? sliced: description ) + "\n" + "Amount: " + $('.' + items[x].item_id).length + "\n" + "Bought: " + vitals.shop.find_amount( data.b , items[x].item_id ).length + "\n" + "Given: " + vitals.shop.find_amount( data.r , items[x].item_id ).length + "\n" + "ID: " + items[x].item_id );

                   }

               }

           }


When you click on the item, it alerts with the wrong description and name (namely the name and description of the LAST item in the shop). I'm stumped.

And since these are virtually identical the only thing I can surmise is that somewhere in one of the new functions I did something weird. But I can't find it and it's to large to post here

[Chris]

var name = items[x].item_name;

$( '.' + items[x].item_id ).click(function (){

proboards.alert( 'Name: ' + name + '<br /><br />Description: ' + description );

} );

-

Remember that when you access variables (i.e. name and description) using closure you're accessing the variable and not the value the variable had in that moment of time when you created the closure. What this means is when that value changes, as it does in this case since it is updated through each iteration of the for loop, the value in your access to that closure variable will also change, this is why it reflects the value assigned to it in the last iteration of the loop once your function accesses it since that was the last value assigned to it. (that's a bit confusing now that I've read it!)

+	Variables accessed through closure are like any other variable in that they are subject to change. Since it is being updated in a loop then it will end up with the value last assigned to it in the loop.

If you wish to save the value for a specific iteration through the loop so your function can use it then one way I've accomplished this in the past is to assign the value as an expando property to the dynamically created function itself

var name = items[x].item_name,
func = function (){
var ac = arguments.callee;
proboards.alert( 'Name: ' + ac.name + '<br /><br />Description: ' + ac.description );
}
func.name = name;
func.description = description;
$( '.' + items[x].item_id ).click(func);

[Texas]

Okay, I'll try that out. But I did notice a lot of stuff concerning expando properties not being good to use. I may just be misinformed though.

[Chris]

That would be on objects that others may need to enumerate but since this is your own private anonymous function the chance of someone else needing to check any properties it may possess is next to nil, not to mention it is of type function which is not normally enumerated. If someone by some fluke needed to access your private anonymous function they would more than likely invoke the handler or call (pun intended) the methods or properties directly rather than cycle over each.

[Texas]

Okay, well, it worked. I only had one problem, apparently you can't do func.name = x; I believe .name is a set property, I had to change it to dname, then it worked.

[Chris]

The name property of a function object is non-standard but if implemented it is read-only so good catch