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

Question

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

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

那个循环不工作，我没有任何控制台错误，但这里的逻辑有缺陷。有人可以帮助我吗？

Answer 1

你想要这样吗

var linesArr = ["asd", "dsa", "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);
            });
        //};
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

如果需要循环，可以在 IIFE 中使用循环：

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

var linesArr = ["asd", "dsa", "das"];
$('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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>Click Me</div>

当完整回调运行时，您的 i 变量已经达到最后一个值。为了保留变量范围，您可以使用 IIFE

Answer 3

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

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

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

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

$(document.body).append(div);

$(div).click(function() {
  $(div).fadeOut(1000, function() {
    $(this).html(linesArr[show++ % linesArr.length]).fadeIn(2000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Insert items from an array into a div when clicking

javascript

jquery

arrays

iteration

cycle