8

私は非常に単純なことを成し遂げる必要があります、そして私が今まで持っていることは半分しか機能しません。

タイトル属性<a href="#" class="favorites">Favorite</a>がないことがわかるように、リンクがあります。

ページがロードされると、スクリプトは次のタイトル属性を追加します。

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

クリックすると、チェックされたクラスが切り替えられ、タイトル属性を変更する必要があるため、最終結果は次のようになります。

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

クリック時に属性を「切り替える」方法はありますか？

この問題を示すためにこのデモを作成しました。

前もって感謝します。

4

4 に答える 4

7

これを試して

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

FIDDLEを確認してください

于 2012-10-24T17:49:13.850 に答える
1

is / 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');
    } 
});​
于 2012-10-24T17:49:12.727 に答える
1

属性を使用しdata-て代替タイトルを保存し、titleクリックするたびに属性で切り替えます。jQueryは、メソッドdata-を使用して属性に含まれるものを自動的に取得します。.data()これには、非常に柔軟であるという利点があり.favoritesます。この1つのイベントハンドラーを使用して、任意のリンクで任意のタイトルテキストを交換できます。

<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);
    };
});​
于 2012-10-24T17:49:37.307 に答える
1

パーティーに遅れていることは知っていますが、プロパティの切り替えを処理するための小さなプラグインを作成しました

(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プロパティを使用すると、最初のタイトル、または前後に切り替えたい新しいタイトルを渡すことができます。

于 2012-10-24T18:23:12.793 に答える