Jquery pass variable between methods

Couldn't find a clear answer to what I'm trying to achieve. I'm sure it's simple but I'm missing it.

I will be building a list of links on a page that all have the class of "prettyLink" and each will have a title. On mouseover I'm trying to store that title in a variable and remove the title, then on mouseout replace that开发者_如何转开发 title with what was stored. (basically removing the title while being moused over and putting it back when moused out)

here is the code:

$('a.prettyLink').mouseover(function() {
   var oldTitle = this.title;
   $(this).removeAttr('title');
}).mouseout(function() {
   $(this).attr('title',oldTitle);
});

Any help is appreciated. Thanks!

Simply declare the variable outside of the mouseover() method:

var oldTitle;
$('a.prettyLink').mouseover(function() {
   oldTitle = this.title;
   $(this).removeAttr('title');
}).mouseout(function() {
   $(this).attr('title',oldTitle);
});

JS Fiddle demo.

Declaring the variable outside of the method allows the variable's value to be assigned within the method, and have that new value be available elsewhere.

You need to save oldTitle outside of the local scope. I like to use jQuery's .data() method.

$('a.prettyLink').mouseover(function() {
   $(this).data('oldTitle', this.title);
   $(this).removeAttr('title');
}).mouseout(function() {
   $(this).attr('title',$(this).data('oldTitle'));
});

var oldTitle;
$('a.prettyLink').mouseover(function() {
   oldTitle = this.title;
   $(this).removeAttr('title');
}).mouseout(function() {
   $(this).attr('title',oldTitle);
});

Should work.

You can use jQuery.data to store the information and retrieve it later

It would be better if you use hover event:

var oldTitle;
$('a.prettyLink').hover(function() {
   oldTitle = this.title;
   $(this).removeAttr('title');
},function() {
   $(this).attr('title',oldTitle);
});

That's because mouseover triggers many times, hover only once it enters (equivalent to mousenter)

Hope this helps. Cheers

You could try placing a hidden <span id="title"></span> on the page, which will hold that variable and you're always just setting/getting from that span.

Then use your code:

$('a.prettyLink').mouseover(function() {
   var oldTitle = this.title;
   $('#title').val(oldTitle);
   $(this).removeAttr('title');
}).mouseout(function() {
   $(this).attr('title',$('#title').val());
});

Another way would be to declare oldTitle as a global in your page and use it that way.

Consider using data(): http://api.jquery.com/jQuery.data/

This has the advantage of storing the value with the element that the events are bound to, whereas a declared global variable might get overwritten by events from other elements that do the same thing.

Here my sollution

$(".swap").mouseover(function () {
    var $img = $(this).find('img');
    $(this).data('oldSrc', $img.attr('src'));
    $img.attr("src",  $img.data('alt-src'));
}).mouseout(function () {
    var $img = $(this).find('img');
    $img.attr("src", $(this).data('oldSrc'));
});

<div class='swap'><img src='mysrc' data-alt-src='new_src'/></div>