jQuery:根据状态，HREF的切换标题属性

Question

我需要完成非常简单的事情，而到目前为止，我只能完成一半。

我有一个链接<a href="#" class="favorites">Favorite</a>，因为您可以看到它没有 title 属性。

加载页面时，脚本添加此 title 属性：

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

单击时，将切换一个类检查，然后应更改 title 属性，因此最终结果就是这样：

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

我有此代码，但是它更改了新的标题属性，当再次单击时，标题属性并未交换，我需要哪个：

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

有什么事我可以在单击时"切换"属性？

我创建了此 demo 以显示此问题。

预先感谢。

Answer 1

尝试此

$('.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);
});​

检查小提琴

Answer 2

您可以在as/else内部或只使用三元运算符

//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/

最终与

相同

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

使用 data-属性存储替代标题，然后每次点击使用title属性进行切换。jQuery将使用.data()方法自动检索data-属性中的任何内容。这具有非常灵活的优势 - 任何.favorites链接都可以使用此事件处理程序交换任何标题文本。

<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/

或，如果您希望它更灵活，请添加一些代码以检测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

我知道我参加了聚会迟到，但是我写了一些插件来处理属性的切换

(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);

只需将其放入事件调用中，就很好。

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

此外，toggleFrom属性允许您传递初始标题或要在之间来回切换的新标题。