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/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;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/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;lp_lang=auto"&gt;&lt;/embed&gt;&lt;/object&gt;');
    }, function() {
      $(this).html(''+performer+'');
    });

Answer 1

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/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;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/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;lp_lang=auto"&gt;&lt;/embed&gt;&lt;/object&gt;');
    }, 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/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;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/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;lp_lang=auto"&gt;&lt;/embed&gt;&lt;/object&gt;');
}, function() {
    $(this).html('' + $(this).attr("rel") + '');
});

Answer 2

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+'');
    });

Answer 3

Yes but now it says "undefined" when i hover out of the .photo I have 10 .photo divs – webmasters 0 secs ago