JQuery: Toggle href header attribute based on state

Question

I need to do something very simple, and that I still only work halfway.

I have a <a href="#" class="favorites">Favorite</a> link, as you can see that it does not have a title attribute.

When the page is loaded, the script adds this title attribute:

<a href="#" class="favorites" title="Add to Favorites">Favorites</a>

When clicked, the class is checked, and then the title attribute must be changed, so the end result will be like this:

<a href="#" class="favorites checked" title="Item added to Favorites">Favorites</a>

I have this code, but although it changes the title attribute for a new one, when I click it again, the title attribute is not replaced, which is what I need:

 $('.favorites').attr('title','Add to Favorites').click(function(){ $(this).toggleClass('checked').attr('title','Added to Favorites'); }); 

How and how can I "switch" attributes on click?

I created this DEMO to show this problem.

Thanks in advance.

Answer 1

try it

 $('.favorites').attr('title', 'Add to Favorites').click(function() { $(this).toggleClass('checked'); var title = 'Add to Favorites' ; if( $(this).hasClass('checked')){ title = 'Added to Favorites'; } $(this).attr('title', title); });​ 

Check FIDDLE

Answer 2

You can do inside a / else or just use the ternary operator

 //Toggle attribute $('.favorites').attr('title', 'Add to Favorites').click(function() { $(this) .toggleClass('checked') .attr('title', $(this).hasClass('checked') ? "Item added to Favorites":'Added to Favorites'); });​ 

http://jsfiddle.net/WwqYC/

which ultimately coincides with

 $('.favorites').attr('title', 'Add to Favorites').click(function() { $(this).toggleClass('checked'); if($(this).hasClass('checked')){ $(this).attr('title',"Item added to Favorites"); }else{ $(this).attr('title','Added to Favorites'); } });​ 

Answer 3

Use the data- attribute to store an alternate title, and then switch it with the title attribute each click. jQuery will automatically retrieve everything that is in the data- attribute using the .data() method. The advantage of this is that it is very flexible - any .favorites link can change any header text using this event handler.

 <a href="#" class="favorites" data-title2="Added to Favorites" title="Add to Favorites">Favorites</a>​ 

JS:

 $('.favorites').click(function() { var $this = $(this), t1 = $this.attr('title'), t2 = $this.data('title2'); $this.toggleClass('checked').attr('title',t2).data('title2',t1); });​ 

http://jsfiddle.net/mblase75/Na2pE/

Or, if you want it to be even more flexible, add code to detect data-title2 :

 $('.favorites').click(function() { var $this = $(this), t1 = $this.attr('title'), t2 = $this.data('title2'); $this.toggleClass('checked'); if (t2) { $this.attr('title', t2).data('title2', t1); }; });​ 

Answer 4

I know I'm late to the party, but I wrote a little plugin to handle property switching

 (function($) { var methods = { init: function(options){ var defaults = { propName: '', toggleTo: '', toggleFrom: '' } return this.each(function() { var $this = $(this); var settings = $.extend({}, defaults, options); if($this.data('toggled') == 'false' || !$this.data('toggled')){ $this.data('toggled', 'true'); $this.prop(settings.propName, settings.toggleTo); }else{ $this.data('toggled', 'false'); $this.prop(settings.propName, settings.toggleFrom); } }); } } $.fn.toggleProperty = function( method ) { if (methods[method]) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error( 'Method ' + method + ' does not exist on jQuery.toggleProperty' ); } }; })(jQuery); 

Just put this during the event call and you are good.

 $('element').click(function(){ $(this).toggleProperty({ propName: 'title', toggleTo: 'Added From Favorites', toggleFrom: $(this).prop('title') }); }); 

In addition, the toggleFrom property allows toggleFrom to pass the initial title or the new title that you want to switch between.