javascript - jqueryはそれぞれループしてアニメーション化します

Question

私はいくつかのスパンタグを持っています：

<span w="560"></span>
<span w="340"></span>
<span w="120"></span>

jQueryを使用して、各スパンを選択し、そのw属性内の値を取得して、その値+"px"にアニメーション化します。

動作しなかった単純なコードがあります：

$(document).ready(function(){

    $('span').animate({width: $(this).attr('w') + 'px'}, 2000);

});

助言がありますか？

ありがとう。

score 3 · Accepted Answer

これはコンテキストがないと意味がありません。

これは反復で現在のスパンを参照するため、使用する$.each loopとコードが機能するはずです

$('span').each(function() {
    $(this).animate({width: $(this).attr('w') + 'px'}, 2000);
  });

アップデート

示唆されているようadeneoに、カスタム属性を使用している間、HTML は検証されません。HTMLも検証されるように、データを先頭に追加します..

<span data-w="560"></span>

それにアクセスするには、使用できます

$(this).data('w'); また $(this).attr('data-w')

score 2 · Accepted Answer

data-w のような有効な属性を使用します。

<span data-w="560"></span>
<span data-w="340"></span>
<span data-w="120"></span>

要素を反復処理します

$(document).ready(function(){

    $('span').each(function(idx, elm) {
        $(elm).animate({width: $(elm).data('w')}, 2000);
    });

});

2 に答える 2