1

私はこの質問に答えました: jQuery でカスタム値を操作する

このjQueryでは：

$('img').attr('u', function(i,u) {
    /* i is the index of the current image among all the images returned by the selector,
       u is the current value of that attribute */
    return u.slice(0, -1) + (parseInt(u.replace(/\D/g,''), 10) + 1);
});

answer へのリンク、その answer からのJS Fiddle demo。

data-*しかし、 HTML5 で許可されているカスタム属性 (無効ではあるが機能するカスタム属性ではなく)を使用して、「適切に」それを行う方法を示す必要があると感じたので、HTML を次のように変更しました。

<img src="http://placekitten.com/400/500" class="className" click="" id='button4' data-u="button6" data-r="button5" data-l="ele1" data-d="" />

(いいえ、このclick属性が何を意味するのか、なぜそこにあるのかわからないので、そのままにしておきました。)

そして、次のjQueryをテストしました:

$('img').data('u', function(i,u) {
    /* i is the index of the current image among all the images returned by the selector,
       u is the current value of that attribute */
    return u.slice(0, -1) + (parseInt(u.replace(/\D/g,''), 10) + 1);
});

$('img').each(function(){
    console.log($(this).data('u'));
});

JS フィドルのデモ。

さて、data()メソッドを使用すると、属性が更新されないことがわかりました。そのため、を使用しconsole.log()て更新された値を確認しましたが、出力は無名関数自体であり、そこから返されると予想される値ではありません関数。これがバグである可能性は低く、おそらく予想される動作であることは理解していますが、匿名関数を使用して、たとえば 、 などで使用されるのと同じ方法で属性を更新する方法はありattr()ますtext()か?

4

3 に答える 3

1

この機能が必要な場合は、簡単に追加できます。

$.fn.fdata = function( name, callback ) {
    return this.each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
};

$(sel).fdata( name, callback );これで、コールバックで必要なことを使用および実行できます。

既存のメソッドを拡張してコールバック機能を追加したくなるかもしれません$().data()が、他の人が指摘したように、関数参照をデータとして格納できることに依存する他のコードが壊れてしまいます。

もちろん、このメソッドを追加.fdata()するだけで他のコードが破損する可能性もあります。ページ上の他のコードが、独自のプラグインで同じメソッド名を使用しようとした場合です。したがって、代わりにこれを単純な関数にする方が賢明かもしれません。コードはどちらの方法でもほぼ同じです。

function updateData( selector, name, callback ) {
    $(selector).each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
}
于 2013-05-17T16:20:55.223 に答える