1

以下のコードでは、文字の配列を含むvalue属性を使用して内部 HTML を変更するために、クラス "rot"を持つオブジェクトを作成しようとしました。

この文字が間隔をあけて回転するようにしたいです。

問題はforループの内側にあることに気付きました- setTimeoutなどが必要ですが、うまくいきません。

この問題の解決策はありますか?

前もって感謝します。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>


<span class="rot" value="$^%^@">currency</span>
<span class="rot" value="1^2^3">numbers</span>


<script>
function rotateItem()
{ 
 for(j=0;j<$(".rot").get().length;j++)
 {
  valueToRotate = $(".rot:eq("+j+")").attr("value").split("^"); 

  for(i=0;i<valueToRotate.length;i++)
  {
   $(".rot:eq("+j+")").html(valueToRotate[i]);
  }
 }
}
setInterval("rotateItem()",1000)
</script>
4

1 に答える 1

1

You can use the jQuery .data() method to store the current index of each character being rotated. Also, the .each() method makes it very easy to perform some function for each element in a jQuery result.

Try this:

function rotateItem() {
    $('.rot').each(function() { // for each jquery object with class 'rot'
        var values = $(this).attr('value').split('^'); // get value array

        if ($(this).data('activeVal') == null) // if 'activeVal' is not set, set it to a default of 0
            $(this).data('activeVal', 0);
        else // otherwise increment through array indexes
            $(this).data('activeVal', ($(this).data('activeVal') + 1)%values.length); // mod (%) makes sure we loop back when we get to the end

        $(this).html(values[$(this).data('activeVal')]);
    });
}

setInterval(rotateItem,1000);
于 2010-11-18T22:52:13.830 に答える