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

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

    var linesArr = ["asd", "dsa", "das"];

我有一个div，我用JS创建了它，并用CSS设置了它的样式：

    var div = document.createElement("div");
    div.className = "storyArea";
    div.innerHTML = linesArr[0];

现在，我有一个代码，可以在单击时设置文本淡入淡出的动画：

    $(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));
            });
        };
    });

$（div）。单击（函数（）{
对于（变量i=1；i

这个循环不起作用，我没有任何控制台错误，但这里的逻辑是有缺陷的。谁能帮帮我吗？

你想这样吗

var linesArr=[“asd”、“dsa”、“das”]；
var div=document.createElement（“div”）；
div.className=“故事区”；
div.innerHTML=linesArr[0]；
文件.正文.附件（div）；
$（div）。单击（函数（）{
//对于（变量i=1；i
如果需要循环，可以在生活中使用循环：

 $('div').click(function () {
  (function loop(i) {
    $('div').html(linesArr[i]).fadeOut(1000, function () {
        $(this).html(linesArr[i]).fadeIn(2000);
        i++;
        if (i < linesArr.length) {
            loop(i);
        }
    });
  })(0);
});

$（'div'）。单击（函数（）{
（功能循环（一）{
$（'div'）.html（linesArr[i]）.fadeOut（1000，函数（）{
$（this.html（linesArr[i]）.fadeIn（2000）；
i++；
如果（i


var linesArr=[“asd”、“dsa”、“das”]；
$（'div'）。单击（函数（）{
（功能循环（一）{
$（'div'）.html（linesArr[i]）.fadeOut（1000，函数（）{
$（this.html（linesArr[i]）.fadeIn（2000）；
i++；
如果（i

单击“我”
您可以使用指针（
show
在本例中）跟踪当前显示的元素。然后每次单击“淡出当前”和“淡入下一个”

我还使用一个模块
%
在到达末尾时循环回第一个元素


var linesArr=[“asd”、“dsa”、“das”]；
var=1；
var div=document.createElement（“div”）；
div.className=“故事区”；
div.innerHTML=linesArr[0]；
$（document.body）.append（div）；
$（div）。单击（函数（）{
$（div）.fadeOut（1000，函数（）{
$（this.html（linesArr[show++%linesArr.length]）.fadeIn（2000）；
});
});
请单击
并创建“是”！但当我单击“asd”时，它应该先与“dsa”交换，然后与“das”交换。每次单击文本都会显示下一个数组项。@MaximKorotkov:我已经更新了答案，请检查。非常感谢！我自己也做不到=/