我的html代码中有一个给定的p元素列表。
在页面加载时,我尝试按给定的时间间隔(1秒)对每个<p>
元素的内容进行排队。
鉴于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秒后第二行应该被替换,1秒后更新第3行,4秒后第4行等等。
$("p").ready(function(){
setInterval(function () {
$('p').text('aaaahhhhh.... happy!')
}, 1000);
});
我做错了什么?我应该使用for循环,每个(),而不是选择器+ setInterval?请转发关键字,以便我可以深入了解相关文档。小提琴欣赏〜
答案 0 :(得分: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);
});
查看现场演示
答案 1 :(得分: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
答案 2 :(得分:1)
你的间隔工作时使用append而不是text来查看效果。使用document.ready
而不是$("p").ready
<强> Live Demo 强>
$(document).ready(function(){
setInterval(function () {
$('p').append('aaaahhhhh.... happy!')
}, 1000);
});
<强> Live Demo 强>
i = 0;
$(document).ready(function () {
div1 = $('#div1');
parry = $("p");
setInterval(function () {
div1.append(parry.eq(i++).text() + '<br />')
if (i > 3) i = 0;
}, 400);
});
答案 3 :(得分: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);