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

您可以使用指针（在这种情况下为show）来跟踪当前显示的元素。然后在每次点击时淡出电流并淡入下一个。

当你到达终点时，我还使用模块%循环回第一个元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果需要循环，可以在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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

完成回调后， i 变量已达到最后一个值。为了保留变量范围，您可以使用IIFE

点击

3 个答案: