Question

我有这个代码，我想做的是从文本中做出“淡入淡出”效果，虽然每次它都会执行fadeIn fadeOut它会用下一个数组值替换文本（在p id =“string”上显示），但每次都显示最后一个值（名称3 - 消息3）。

下面的html代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    var str = $("#string").text().split(' + ');
    setInterval(function(){
        s++;
        for (var s = 0; s < str.length; s++) {
            var string = str[s];
            $("#string").html(string);
            $("#string").fadeIn(500);
            $("#string").fadeOut(3000);
        }   
    }, 6000);
});
</script>
</head>
<body>
<p id="string" style="display:none;">Name 1 - Message 1 + Name 2 - Message 2 + Name 3 - Message 3</p>
</body>
</html>

谢谢你。

Answer 1

您不需要任何循环来实现您想要的目标：

var placeholder = $("#string");
var words = placeholder.text().split(' + ');
var index = 0;
window.setInterval(ShowCurrentWord, 6000);
ShowCurrentWord();
function ShowCurrentWord() {
    var currentWord = words[index];
    placeholder.html(currentWord).fadeIn(500).fadeOut(3000);
    index = (index + 1) % words.length;
}

Live test case

详细信息：将当前索引存储在全局变量中，然后使用该索引并递增函数的每次执行。另请注意，您需要先调用该功能，否则您将在第一个项目出现前等待6秒。

Answer 2

您的代码将在每次最后一项时显示，因为您正在计时器内执行循环。

您应该用以下代码替换您的代码：

$(document).ready(function(){

    var str = $("#string").text().split(' + ');
    var s = 0;
    var arrayLength = str.length;

    setInterval(function(){

        if(s>(arrayLength - 1)){
            s = 0;
        }   
        var string = str[s];
        $("#string").html(string);
        $("#string").fadeIn(500);
        $("#string").fadeOut(500);

        s++;

    }, 1000);
});

这里的小提琴：http://jsfiddle.net/zGSYz/

循环的javascript数组一次又一次地显示数组中的最后一项

2 个答案: