Question

i’am a learner so i need still experience and i have many questions, but today i have only one question about the hover function.

is it possible to send the information about a variable from the first hover function into the seconde one? i think you dont need more information. is just changing a part from the src in a tag.

i hope you understand me. =)

here is the example

http://jsbin.com/eporib/edit#javascript,html,live

how is look now!

box.hover(function(){
    var $this = $(this),
                oldImg = $this.find('img').attr('src'),
                slicedOldImg = oldImg.slice(0,-5),
                newImg = slicedOldImg+num6;
    $this.find('img').attr('src', newImg);
      $('#hello').append('IN '+newImg);

}, function() {
              var $this = $(this),
                  oldImg = $this.find('img').attr('src'),
                  slicedOldImg = oldImg.slice(0,-5),
                  newImg = slicedOldImg+num1;
    $this.find('img').attr('src', newImg);
            $('#hello').append('OUT '+newImg+ '<br />');

}); /*end Hover*/

and how i want it

box.hover(function(){
    var $this = $(this),
                oldImg = $this.find('img').attr('src'),
                slicedOldImg = oldImg.slice(0,-5),
                newImg = slicedOldImg+num6;
    $this.find('img').attr('src', newImg);
      $('#hello').append('IN '+newImg);

}, function() {
    $this.find('img').attr('src', oldImg);
          //look here, the oldImg is in the first function.
          // and i want it use it in the second too.

            $('#hello').append('OUT '+newImg+ '<br />');

}); /*end Hover*/

Answer 1

Yes, there are at least two ways you can do this:

1. Using a closure

Wrap the whole thing in a closure and use a variable in that closure:

(function() {
    var oldImg;

    box.hover(function(){
        var $this = $(this), slicedOldImg newImg;
        oldImg = $this.find('img').attr('src'); // Setting it
        slicedOldImg = oldImg.slice(0,-5);
        newImg = slicedOldImg+num6;
        $this.find('img').attr('src', newImg);
          $('#hello').append('IN '+newImg);

    }, function() {
        // Missing `var $this = $(this);` here?
        if (oldImg) {
            // Use it
            $this.find('img').attr('src', oldImg);

            // and clear it
            oldImg = undefined;
        }

        $('#hello').append('OUT '+newImg+ '<br />');

    }    ); /*end Hover*/
})();

In that example, we use an anonymous wrapper function that we execute immediately for the closure, but you may well already be doing this code in a closure (a function), so you may not need to add that wrapper. (If the word “closure” is new to you, don’t worry, closures are not complicated.)

2. Using data

Alternately, you can use data to store the information on the element:

box.hover(function(){
    var $this = $(this),
                oldImg = $this.find('img').attr('src'),
                slicedOldImg = oldImg.slice(0,-5),
                newImg = slicedOldImg+num6;
    $this.data("oldImg", oldImg);
    $this.find('img').attr('src', newImg);
      $('#hello').append('IN '+newImg);

}, function() {
    // Missing `var $this = $(this);` here?
    var oldImg = $this.data("oldImg");
    if (oldImg) {
        $this.find('img').attr('src', oldImg);
        $('#hello').append('OUT '+newImg+ '<br />');
    }    
}    ); /*end Hover*/