Как повернуть массив значений в пределах конкретного тега, который содержит уникальный класс по интервалу в JQuery? - PullRequest
1 голос
/ 01 ноября 2010

В приведенном ниже фрагменте кода я попытался создать объекты с классом "rot" , чтобы изменить внутренний HTML-код, используя атрибут value , включающий массив символов. 1005 *

Я хочу, чтобы эти символы вращались с интервалом.

Я заметил, что проблема во внутреннем цикле для - мне нужен 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>

1 Ответ

1 голос
/ 19 ноября 2010

Вы можете использовать метод jQuery .data () для хранения текущего индекса каждого поворачиваемого символа. Кроме того, метод .each () позволяет очень просто выполнить некоторую функцию для каждого элемента в результате jQuery.

Попробуйте это:

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