javascript – 单击时将数组中的项插入div

我有一个预定义行的数组：

    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);
            });
        //};
    });