Jquery pass variable between methods

Question

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!

David Thomas · Accepted Answer · 2011-05-06 20:46:19Z

6

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.

edited May 6, 2011 at 20:46

answered May 6, 2011 at 20:40

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ry- Over a year ago

Darn, you beat me with the exact same answer by 20 seconds. +1

David Thomas Over a year ago

@minitech: muahahahahaaaaaa...! cough Sorry... =D

gen_Eric Over a year ago

+1 for content: attr(title); in a:after in your jsFiddle's css. I did not know you could do that.

Stuck Over a year ago

Crap... can I choose more than one answer?? Sorry minitech... =(

Alanyst Over a year ago

There could be problems with this approach if more than one element match the selector $('a.prettyLink'). If two of those fire a mouseover event before a mouseout event fires, one of them will clobber the other's oldTitle value.

|

gen_Eric · Accepted Answer · 2011-05-06 20:41:56Z

3

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

answered May 6, 2011 at 20:41

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Comments

Ry- · Accepted Answer · 2011-05-06 20:41:18Z

2

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

Should work.

answered May 6, 2011 at 20:41

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

1 Comment

Stuck Over a year ago

THANK YOU!!! Nice and clean and works perfectly. Thanks everyone for your input.

Dave · Accepted Answer · 2011-05-06 20:42:41Z

1

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

answered May 6, 2011 at 20:42

Dave

5926 silver badges8 bronze badges

Comments

Edgar Villegas Alvarado · Accepted Answer · 2011-05-06 20:46:03Z

1

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

answered May 6, 2011 at 20:46

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Comments

slandau · Accepted Answer · 2011-05-06 20:42:22Z

0

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.

answered May 6, 2011 at 20:42

slandau

24.2k43 gold badges124 silver badges186 bronze badges

2 Comments

Stuck Over a year ago

placing it in a hidden input is a last resort. I'm trying to avoid that if I can

slandau Over a year ago

I agree, just another way of doing it :)

Alanyst · Accepted Answer · 2011-05-06 20:43:17Z

0

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.

answered May 6, 2011 at 20:43

Alanyst

1,4308 silver badges11 bronze badges

1 Comment

Stuck Over a year ago

I tried using data in the function but it still didn't seem to work. i.e. function(data) {

nikmauro · Accepted Answer · 2016-03-01 14:56:21Z

0

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>

answered Mar 1, 2016 at 14:56

nikmauro

7137 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery pass variable between methods

8 Answers 8

6 Comments

Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related