Question

I am trying to truncate div headers. My function is buggy because of, I believe, variable scope.

Here is my function broken down:

1. Set variables so they are scoped properly
2. Loop through each div:
   • Save long title
   • Create truncated title
   • Set truncated title
3. On mouse enter, use full title
4. On mouse leave, use truncated title

How can I rearrange this function so the variables are carried across correctly?

jQuery(document).ready(function($) {
    eventHover();
}); 


function eventHover(){

    // Set var scope
    var title = '';
    var shortText = '';
    var longText = '';

    // Change long titles to short version
    $('#event_promo .panel').each( function() {
        title = $(this).find($('h3 a'));
        longText = title.html();

        shortText = jQuery.trim(longText).substring(0, 50)
            .split(" ").slice(0, -1).join(" ") + "...";

        title.html(shortText);
    }); 

    // Add hover class and change title to long version
    $('#event_promo .panel .trigger').mouseenter(function () {
        $(this).parent().addClass('hover');
        title.html(longText);
    });

    // Remove hover class and revert title to short version
    $('#event_promo .panel .trigger').mouseleave(function () {
        $(this).parent().removeClass('hover');
        title.html(shortText);
    });

}

Answer 1

I would suggest using the data() method over “global” variables:

$('#event_promo .panel').each( function() {

    var $title = $(this).find('h3 a');
    var longText = title.html();

    var shortText = jQuery.trim(longText).substring(0, 50)
        .split(" ").slice(0, -1).join(" ") + "...";

    $title.html(shortText);

    $(this).data({ shortText: shortText, longText: longText });
}); 

Handle the data:

$('#event_promo .panel .trigger').mouseenter(function () {

    var longText = $(this).closest('.panel').data('longText');
    var shortText = $(this).closest('.panel').data('shortText');

    //do stuff with the texts here

});