1

いくつかの個別の見出しがあります。

<h3 class="ads">First</h3>

<h3 class="ads">Second</h3>

<h3 class="ads">Third</h3>

そして、テキストを黒から赤に変更し、次の見出しが赤に変わったら黒に戻して、それらを継続的にループできるようにしたいと思います。

これが私がこれまでに持っているものです:一度は動作しますが、正常に再ループすることはできません:

$('.ads').each(function(i) { 
    var el=$(this);
    setTimeout(function() {
        el.prevAll('.ads').css('color','black');
        el.css('color', 'red');
    }, i * 3000); 
});

各変更の間に待機する時間を手動で設定できるようにしたいので、説明も大いに役立ちます!

これがjsFiddleです。

4

2 に答える 2

5

ここでは、少し異なるアプローチを示します。

jsFiddle デモ

var $headings = $('.ads'),
    $length = $headings.length,
    i = 0;

setInterval(function() {
    $headings.css('color','black');
    $headings.eq(i).css('color', 'red');
    i = (i + 1) % $length;
}, 3000);
于 2013-09-22T15:20:05.063 に答える
4

再帰を使用してこれをエレガントに行うことができます。

// configure the delay
var delay = 1000;

// save a pointer to the first element
var first = $('.ads').first();

// this function does the following
// a. color the current element red
// b. make all siblings black
// c. call itself with the next applicable element
function change(_elem) {
    _elem.css('color','red').siblings().css('color', 'black');
    setTimeout(function() {
        change((_elem.next().length > 0) ? _elem.next() : first);
    }, delay);
}

// start if off
change(first);

デモ: http://jsfiddle.net/gNrMJ/16/

于 2013-09-22T15:23:05.600 に答える