CODEWITHSUNDEEP
jquery
Stuck
Stuck

Reputation: 45

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!

Upvotes: 0

Views: 1320

Answers (8)

nikmauro
nikmauro

Reputation: 703

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>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 6

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

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

Upvotes: 1

Alanyst
Alanyst

Reputation: 1410

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.

Upvotes: 0

Dave
Dave

Reputation: 572

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

Upvotes: 1

slandau
slandau

Reputation: 24052

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.

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227200

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

Upvotes: 3

Ry-
Ry-

Reputation: 224867

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

Should work.

Upvotes: 2

Related Questions