0

HTMLコードにp要素の特定のリストがあります。<p>ページの読み込み時に、指定された時間間隔 (1 秒)ごとに各要素のコンテンツの変更をキューに入れようとします。

与えられたhtml：

<p>I want to change first!</p>
<p>I want too!</p>
<p>Me 3rd !</p>
<p>Hey, don't forget me!</p>

CSS:

p { padding: 2px 5px 0px 10px; }
.p { color: #999; }
.green { color:green; border-bottom: 1px solid #888; background: #EEE; }

変更を連鎖させたいので、JSは何にすべきですか。文字通り: 最初の p 文が最初に CSS / HTML に変更され、1 秒後に 2 行目が置き換えられ、1 秒後に 3 行目が置き換えられ、4 秒後に 4 行目が置き換えられます。

$("p").ready(function(){
    setInterval(function () {
        $('p').text('aaaahhhhh.... happy!')
    }, 1000);
  });

それは fail (fiddle)です。

私が間違っていることは何ですか？セレクター + setInterval の代わりに for ループ each() を使用する必要がありますか? 関連するドキュメントを掘り下げることができるように、キーワードを転送してください。フィドル感謝〜

4

4 に答える 4

2

これを試して

$(document).ready(function(){
    var st=null;
    var i=0;
    st=setInterval(function () {
        $('p').eq(i).text('aaaahhhhh.... happy!'); 
        if(i==$('p').length-1)// one less because i initialised by 0.
            clearTimeout(st);
        i++
    }, 1000);
});

ここでライブデモをチェックしてくださいhttp://jsfiddle.net/gT3Ue/14/

于 2013-02-08T11:52:24.863 に答える
2 
(function next($set, i) {
  setTimeout(function () {
    $set.eq(i).text('aaaahhhhh.... happy!');
    if (i < $set.length - 1) {
      next($set, i + 1); 
    }  
  }, 1000);
//    /\
//    ||------ the delay
}($('p'), 0));
//  /\    /\
//  ||    ||-- the starting index
//  ||----- -- your set of elements

デモ: http://jsbin.com/otevif/1/

于 2013-02-08T13:01:41.267 に答える
1 
    function modifyTargetDeferred(target) {
        target.first().text('ahhh... happy');
        if (target.length > 1) {
            setTimeout(function() {
                modifyTargetDeferred(target.not(':first'));
            }, 1000);
        }
    }

    setTimeout(function() {
        modifyTargetDeferred($('p'));
    }, 1000);
于 2013-02-08T13:47:24.717 に答える
1

効果を確認するには、テキストの代わりに追加を使用して間隔が機能しています。使用しdocument.readyない$("p").ready

ライブデモ

$(document).ready(function(){
    setInterval(function () {
        $('p').append('aaaahhhhh.... happy!')
    }, 1000);
  });

ライブデモ

  i = 0;
$(document).ready(function () {
    div1 = $('#div1');
    parry = $("p");
    setInterval(function () {
        div1.append(parry.eq(i++).text() + '<br />')
        if (i > 3) i = 0;
    }, 400);
});
于 2013-02-08T11:35:18.617 に答える