1

問題：

私は現在機能しているスクリプトを持っています。それは基本的に「sponsor-」のクラスでリストアイテムを調べ、設定された速度でそれらを循環します。

したがって、私のhtmlは次のようになります。

<ul>
  <li class="sponsor-1">This is sponsor one</li>
  <li class="sponsor-2">This is sponsor two</li>
  <li class="sponsor-3">This is sponsor three</li>
</ul>

動作するjQuery：

$(document).ready(function() {

var divs = $('li[class^="sponsor-"]').hide(),
    i = 0;

(function cycle() {

    divs.eq(i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % divs.length;

})();
});

これまではすべて問題ありませんが、同じ関数にリスト項目を追加する方法を知る必要があります。'fact-'のクラスを含む別のリストがあり、これも循環させたいと思います。これは間違いなくひどく間違っていますが、これは私が試したものです。

次に試したこと（機能しない）

$(document).ready(function() {

var sponsors = $('li[class^="sponsor-"]').hide(),

var facts = $('li[class^="fact-"]').hide(),

    i = 0;

(function cycle() {

    sponsors.eq(i).fadeIn(400),
     facts.eq(i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % sponsors.length;
    i = ++i % facts.length;

})();
});

これは機能していません。同じ関数にさらに追加して、他のさまざまなサイクルリストをターゲットにできるようにするためのヘルプが必要です。

明確さのための編集

私は最初のサイクルのスポンサー、次に事実へのサイクルを探していません。2つのサイクルを同時に実行したいと思います。ご迷惑をおかけして申し訳ありません。

4

2 に答える 2

0

作業中の jQuery コードで、次のように変更します。

$('li[class^="sponsor-"]')

に

$('li[class^="sponsor-"], li[class^="fact-"]')

2 つのリストを分離するには、コードを複製するだけです (最もクリーンな方法ではありませんが、最も迅速で簡単な方法です)。

$(document).ready(function() {

var sponsors = $('li[class^="sponsor-"]').hide(),

var facts = $('li[class^="fact-"]').hide(),

var facts_i = 0;
var sponsors_i = 0;

(function cycle() {


     sponsors.eq(sponsors_i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);


    sponsors_i = ++sponsors_i % sponsors.length;

})();

(function cycle2() {


     facts.eq(facts_i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle2);


    facts_i = ++facts_i % facts.length;

})();
});
于 2012-09-26T08:49:40.840 に答える
0

divsたとえば、変数をこれに変更すると、すべてが正常に機能しますvar divs = $('li[class^="sponsor-"],li[class^="fact-"]')

ここで実際の例を参照してください。

EDIT複数のリストで動作するようにフィドルを 更新しました。これで、完全に分離された 2 つのリストとして、2 つのサイクルが同時に機能します。

$(document).ready(function() {
    var sponsors = $('li[class^="sponsor-"]').hide(),
    facts = $('li[class^="fact-"]').hide(),
    i = 0;

    function cycle(list,itemNbr) {
        list.eq(itemNbr).fadeIn(400).delay(1000)
            .fadeOut(400,function(){cycle(list,++itemNbr % list.length)});
    };

    cycle(sponsors,i);
    cycle(facts,i);    
});​
于 2012-09-26T08:54:11.300 に答える