Question

我有一个XML文档（如下）：

<?xml version="1.0" encoding="UTF-8"?>
<testimonials>
    <testimonial user="User Name 1" state="1" comment="Comment 1"></testimonial>
    <testimonial user="User Name 2" state="2" comment="Comment 2"></testimonial>
    <testimonial user="User Name 3" state="3" comment="Comment 3"></testimonial>
    <testimonial user="User Name 4" state="4" comment="Comment 4"></testimonial>
    <testimonial user="User Name 5" state="5" comment="Comment 5"></testimonial>
 </testimonials>

我通过jQuery ajax调用获取此数据。现在我想在一个框（#xmlFeed）中显示它并淡入和淡出到下一个节点。它应该显示为让我们说它在移动到下一个节点之前几秒钟，再次淡入和淡出。

到目前为止，我的代码正在下面工作，但我无法让循环和淡入淡出正常工作。代码如下：

<!doctype html>
<html>
<head>
    <title></title>


</head>
<body>
    <div id="container">
        <div id="xmlFeed"></div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function(){

            //Initial load
            getXML();

        });

        getXML = function(){
            $.ajax({
                type: "GET",
                url: "xml/xmlFeed.xml",
                dataType: "xml",
                success: function(xml){

                    var data = $( xml );
                    var findTestis = data.find("testimonial");

                    findTestis.each(function(i){

                        name = this.getAttribute("user");
                        state = this.getAttribute("state");
                        comment = this.getAttribute("comment");

                        contents = "    <div id='listing" + i + "'>"
                                        + "<p><strong>" + comment + "</strong></p>"
                                        + "<p>" + name + ", " + state + "</p>"
                                        + "</div>";

                        setTimeout(function(){
                            $("#xmlFeed").html(contents);
                        }, 2000 * i );

                    });

                }
            });
        }
    </script>
</body>

目前它正在工作并进行显示，但它只是反复显示最后一个节点的内容。我猜我需要更新这些增量或其他内容。可以将其视为RSS sytle功能。

感谢您的帮助，请举例说明。

Answer 1

每个函数中的“i”可能指的是键而不是索引。由于您的对象是一个节点，因此它可能会将其视为一个地图。在这种情况下，您的超时“2000 * i”将不会产生数值（或0），这就是您最后一个节点将始终显示的原因 - 它们全部同时执行但按顺序执行。

参见示例：http://jsfiddle.net/nVdhf/2/

并看到他们的两个数组与地图http://api.jquery.com/jQuery.each/

的例子有所不同

Answer 2

你的问题是你没有等到第一个超时完成，然后再转到下一个超时。您需要以某种方式转到setTimeout方法的回调中的下一个。

Answer 3

我怀疑发生了什么事：

迭代xml数据的内容，为每个节点构建内容字符串。这可能需要几百毫秒的时间。
当您的超时执行时，contents设置为最后一个节点的值，而$('#xmlFeed').html只是设置为该值。

http://jsfiddle.net/cori/PrVRc/1/的某些内容证明了我认为你要做的事情（只是经过轻微测试）。

Answer 4

自己想出来并制作了一个自定义插件来启动。感谢所有帮助，但所有答案都无关紧要。科里你最接近这个标志，但仍然不是我追求的。欢呼声。

在ajax调用之后添加延迟以jquery每个函数

4 个答案: