我有一个预定义行的数组：
var linesArr = ["asd","dsa","das"];
我有一个div,我用JS创建并用我的CSS设置它：
var div = document.createElement("div");
div.className = "storyArea";
div.innerHTML = linesArr[0];
现在我有了可以在点击时为文本设置fadeIns和fadeOuts动画的代码：
$(div).click(function(){
$(this).fadeOut(1000,function() {
$(this).text("Random text").fadeIn(2000);
});
});
但它不是一个可以迭代我的数组项的循环,它将一直显示预定义的文本.
我试着编写一个可以解决这个问题的循环,但是迷路了：
$(div).click(function(){
for (var i = 1; i < linesArr.length; i++) {
$(div).fadeOut(1000,function() {
$(this).html(linesArr[i].fadeIn(2000));
});
};
});
这个循环不起作用,我没有任何控制台错误,但这里的逻辑是有缺陷的.有人能帮助我吗？
最佳答案
你想这样吗？
var linesArr = ["asd","das"];
var div = document.createElement("div");
div.className = "storyArea";
div.innerHTML = linesArr[0];
document.body.appendChild(div);
$(div).click(function(){
//for (var i = 1; i < linesArr.length; i++) {
$(div).fadeOut(1000,function() {
index = linesArr.indexOf($(this).html()) + 1;
$(this).html(linesArr[index % linesArr.length]);
$("div").fadeIn(2000);
});
//};
});