Question

我正在尝试从文本文档中提取文本然后将其拆分，以便在“〜”之前的第一部分显示在一个div中，然后将其余部分添加到另一个div中，同时将其切换为文本它首先显示文本文档中的第一行，然后在5秒后显示到第2行等，当它显示最后一行时，它将循环回到第一行。

希望它有意义，它可能是JSFiddle代码的一个问题，因为文本文档的同源策略，但我在我的服务器上尝试过，它也不能在那里工作。

我在这里缺少什么？

代码示例：JSFiddle

在文本文档中：

0.001TXT~Example text 01
0.002TXT~Example text 02
0.003TXT~Example text 03
0.004TXT~Example text 04
0.005TXT~Example text 05
0.006TXT~Example text 06

HTML：

<body>
    <div id="numbers01">0.000</div>
    <div id="text01">text</div>
</body>

的Javascript ：

$(document).ready(function () {
    var lines = "";
    $.get("http://www.patan77.com/example_text.txt", function (data) {
        lines = data.split("\n");


    });
    var i = 0;
    window.setInterval(function () {
        if (i <= lines.length) {
            var line_string = (lines[i]).split("~");
            $("#numbers01").html(line_string[0]);
            $("#text01").html(line_string[1]);
            i++;
        } else {
            i = 0;
        }
    }, 5000);


});

提前致谢。

Answer 1

我现在还没有完整的答案，但现在可以使用，因为默认情况下JS调用是异步，下面的代码在数据被接收之前运行。通过移动回调中的代码可以解决您的第一个问题。

$(document).ready(function () {
    var lines, i = 0;

    $.get("http://www.patan77.com/example_text.txt", function (data) {
        lines = data.split("\n");

        window.setInterval(function () {
            // Index is always in range
            var line_string = (lines[i]).split("~");
            $("#numbers01").html(line_string[0]);
            $("#text01").html(line_string[1]);

            // Move this part to only control the index
            if (i < lines.length) {
                i++;
            } else {
                i = 0;
            }
        }, 5000);

    });
});

就像那样，它好多了，但我还没把它弄好。无论如何它仍然无法工作......我决定转向更方便的ajax方法。我添加了一个错误处理程序...我相信你的服务器可能会阻止ajax请求，因为我收到空机构。如果我加载没有ajax的url，它会加载文件。

$(document).ready(function () {
    var lines, i = 0;

    $.ajax("http://www.patan77.com/example_text.txt", {
        dataType: "text",
        success: function (data) {                
            lines = data.split("\n");

            window.setInterval(function () {
                // Index is always in range
                var line_string = (lines[i]).split("~");
                $("#numbers01").html(line_string[0]);
                $("#text01").html(line_string[1]);

                // Move this part to only control the index
                if (i < lines.length) {
                    i++;
                } else {
                    i = 0;
                }
            }, 5000);
        },
        error: function (xhr, error, errorThrown) {
            console.log(error + " " + errorThrown);
        }
    });
});

由于我无法加载数据，我做了一个小jsfiddle并模拟了数据here

问题出在该行：

if (i <= lines.length) {

而不是

if (i < lines.length) {

Answer 2

将整个代码放入$ .get回调

中

$(document).ready(function () {
  $.get("http://www.patan77.com/example_text.txt", function (data) {
    var lines = data.split("\n");
    var i = 0;
    window.setInterval(function () {
        if (i <= lines.length) {
            var line_string = (lines[i]).split("~");
            $("#numbers01").html(line_string[0]);
            $("#text01").html(line_string[1]);
            i++;
        } else {
            i = 0;
        }
    }, 5000);
  });
});

否则将调用window.setInterval函数，而＆＃34; lines＆＃34;由于jQuery AJAX函数是异步的，因此尚未填充。

http://jsfiddle.net/CeLED/3/

从文本文档javascript“旋转”/切换文本？

2 个答案: