當setinterval完成時，Javascript循環

請幫我循環完成時間間隔的腳本，當class="cur"轉到最後p span我想再次循環它。我正在練習JavaScript代碼，這就是我所做的。當setinterval完成時，Javascript循環

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<p style="font-size: 50px">This is a test</p> 
<script> 
function blink() { 
    $('.cur').next().css('color', '#333').addClass('cur'); 
    $('.cur:first').css('color', '#ccc').removeClass('cur'); 
} 
var str = $('p').text(); 
var count = str.length - 1; 
var splt = str.split(""); 
var newstr = ""; 
for(i=0;i<=count;i++) { 
    newstr += splt[i].replace(splt[i],"<span style='color: #CCC;'>"+splt[i]+"</span>"); 
} 
$('p').empty().append(newstr); 
$('p span:first').addClass('cur').css('color','#333'); 
setInterval('blink()', 100); 
</script>

來源

2011-03-18 Jorge

什麼似乎是你的代碼現在的問題？ – 2011-03-18 09:33:03

setTimeout而不是setInterval？

來源

2011-03-18 09:31:45 Bart

您需要檢查，如果下一個.cur仍然存在。當它不存在（集合的長度爲0）開始：

function blink() { 
    if ($('.cur').next().length == 0) { 
     $('p span:first').addClass('cur').css('color','#333'); 
     $('p span:last').removeClass('cur').css('color','#ccc'); 
     return; 
    } 
    $('.cur').next().css('color', '#333').addClass('cur'); 
    $('.cur:first').css('color', '#ccc').removeClass('cur'); 
}

現場測試案例：http://jsfiddle.net/yahavbr/QKYHt/

來源

2011-03-18 09:42:02

請參閱http://en.wikipedia.org/wiki/Don't_repeat_yourself – Alnitak 2011-03-18 09:47:10

非常感謝！這是最好的答案 – Jorge 2011-03-21 01:00:09

@blink我沒有測試Alnitak的答案，但如果其他代碼正在工作，那麼它會更好，因爲它更優化 - 我不花時間優化它，而是快速地編寫代碼。無論如何，請點擊左邊的「V」圖標，接受您最終將使用代碼的答案。 – 2011-03-21 08:32:45

如果$('.cur').next()是你需要再次回到第一區間空數組：

function blink() { 
    var cur = $('.cur'); 
    var next = $(cur).next(); 
    if (next.length == 0) { 
     next = $('p span:first'); 
    } 

    $(next).addClass('cur'); 
    $(cur).removeClass('cur'); 
}

工作演示在http://jsfiddle.net/cqkPV/3/

請注意，這不需要任何預先設置 - 第一次調用它會正確地突出顯示第一個元素。在空列表上調用$(...).method()是jQuery中的NoOp。

注意：我已經從跨度和.css調用中刪除了顯式顏色，並將高亮顏色移動到CSS文件中。

來源

2011-03-18 09:45:53 Alnitak

當setinterval完成時，Javascript循環

回答

相關問題