Jquery variable inside hover not working

Question

Hey there, working on the code and kind of got it working. Now pleeaseee tell me what's wrong. On hover .photo i make a variable performer with the rel value of a link inside .photo

And i want to use this variable when the mouse leaves. It does now work, any ideas?

$(".photo").hoverIntent(function() {

      var performer = $(".photo").attr("rel");

      $(this).html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0" width="250" height="250"><param name="movie" value="http://static.awempire.com/flash/live_feeds/live_feed.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto" /><embed src="http://static.awempire.com/flash/live_feeds/live_feed.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" flashvars="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto"></embed></object>');
    }, function() {
      $(this).html(''+performer+'');
    });

Bob Fincheimer · Accepted Answer · 2010-07-22 19:09:57Z

The second anonymous function you created cannot see the performer var, it is not in the scope chain. You must put it outside like this:

$('.photo').each(function() { // All of the .photo divs....
    var performer = $(this).attr("rel");
    $(this).hoverIntent(function() {
        // The second function can't see in here
        $(this).html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0" width="250" height="250"><param name="movie" value="http://static.awempire.com/flash/live_feeds/live_feed.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto" /><embed src="http://static.awempire.com/flash/live_feeds/live_feed.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" flashvars="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto"></embed></object>');
    }, function() {
        $(this).html(''+performer+'');
    });
});

If you don't know why, i would suggest learning more about closures in javascript.

Edit

Sorry, didn't know there were duplicates...

Use each to iterate through each and create a variable for every .photo, then that varaible can be referenced by the anonymous functions created.

Edit

Also i don't see why you didn't just take your original code and do this:

$(this).hoverIntent(function() {
    $(this).html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0" width="250" height="250"><param name="movie" value="http://static.awempire.com/flash/live_feeds/live_feed.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto" /><embed src="http://static.awempire.com/flash/live_feeds/live_feed.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" flashvars="appletroot=http://static.awempire.com/flash/live_feeds/&appletskin=template8/template01.swf&appletcol=900000&psid=ddany23&campaign_id=20520&pstour=t1&psprogram=REVS&site=jsm&flags=137438953473,137438953504,1,32&lp_lang=auto"></embed></object>');
}, function() {
    $(this).html('' + $(this).attr("rel") + '');
});

Yes but now it says "undefined" when i hover out of the .photo I have 10 .photo divs
Let me explain better... the each method , i'm pretty sure it won't working. I have 10 .photo divs with 10 different images. When i hover on any one, it plays the flash. When i hover out, I want the image coresponding to that .photo div to be shown

Justin Lucas · Accepted Answer · 2010-07-22 19:06:09Z

0

Make performer a global variable by initiating it outside of the first function like so:

var performer = 1;
$(".photo").hoverIntent(function() {

      performer = $(".photo").attr("rel");

      $(this).html('stuff....');
    }, function() {
      $(this).html(''+performer+'');
    });

answered Jul 22, 2010 at 19:06

Justin Lucas

2,3111 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

Jquery variable inside hover not working

2 Answers 2

Edit

Edit

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

Edit

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related