jQuery: Toggle title attribute of href depending on state

Question

I need to accomplish something quite simple, and what I have so far only works half way.

I have a link <a href="#" class="favorites">Favorite</a> as you can see it has no title attribute.

When page is loaded a script adds this title attribute:

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

When clicked, a class checked is toggled and then the title attribute should be changed, so the end result would 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 the new one, when clicked again the title attribute isn't swapped, which what I need:

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

Any ides how I can 'toggle' attributes on click?

I created this DEMO to show this problem.

Thanks in advance.

Answer 1

Try this

$('.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