Question

我正在尝试将建议的文本文件发送到xampp服务器，但我想知道如何剥离并仅在循环中显示结果1-10，并且当按下按钮2以显示结果11-20时。然后，当您第三次按下按钮时，它将显示结果21-30。一旦完成，我想知道当按下向后按钮时如何反转这个顺序。

我在box1

中请求文本文件后，需要显示两个按钮

</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    var i;
    var highlight;
        $(document).ready(function() {
            $("#button1").click(function() {
                $.get("topHits1990.txt", function(data, status) {
                    console.log("The data is below");
                    console.log(data);
                    console.log("The status is below");
                    console.log(status);
                        $("#box1").html(data);
                        $("#button2").show();
                        $("#button3").show();

});

            $("#button2").click(function() {
                    $.get("topHits1990.txt", function(data, status) {
                            for (i=0 i > 9; i++) 
                                $("#box1").html(data);
                            }

                        } else if (i>10 i++) {

                });


        });




    </script>
</head>
<body>
    <h1>Favorite Songs</h1>
    <button type="button" id="button1">Show Songs</button>
    <div id="box1"></div>

</body>

我希望每次按下按钮时都会递增，按下向后按钮时会递减，我想在运行功能中隐藏前进和后退按钮。我是jQuery混合Javascript的初学者，所以任何创意批评都是受欢迎的它只显示整个文本文件，并且不会限制您能够看到多少数据，我每次按下其中一个按钮时都会将其限制为10个条目。

该函数不起作用，因为您必须将xampp服务器与我请求的文件一起使用，因为它是ajax，jquery和javascript任务。

Answer 1

我正在尝试将文本文件发送到方框1，但只有10个条目而不是整个30

首先，你需要知道如何只获得x条目。您可以通过将文本文件拆分为记录来执行此操作 - 您需要确定每个记录（即分隔符）之间的分隔。

topHits1990.txt是一行文本文件，每行有一行吗？还是以逗号分隔？可能由;分隔。您可以使用此分隔符将数据块分割为记录。

假设每行一行，则分隔符为换行符或\n。

然后将单个文本文件转换/分解为＆＃34;记录＆＃34;，在这种情况下：

var records=data.split("\n");

或

var records=data.split(",");

这为您提供了一个数组，您可以根据需要进行操作。

为简单起见，您可以遍历数组，例如：

var records=data.split(",");
var result = "";
for (var i=0; i<10; ++i) {
    result = result + records[i] + "\n";
}
$("#box1").text(result);

或者你可以使用一些有点发烧友的东西，例如slice加上加入，例如：

var records=data.split("\n");  // use whatever separator is required here
$("#box1").text(records.slice(0, 9).join("\n"));

显示＆＃39; next＆＃39;一组记录，你只需要改变起始位置。

全部放在一起：

＆＃13;

// This would be the result of your $.get
var data = "row1,row2,row3,row4,row5,row6,row7,row8,row9,row10";

// number of rows to show - 3 for demo, change to 10
var rowstoshow = 3; 

// current position, clicking the button moves to the *next* position
// so need to indicate we haven't started yet
var position = -1;

$("#btn").click(function() {

    // split the data into rows
    var rows = data.split(",");

    // Move to next position, check if first, reset if too far
    position = position < 0 ? 0 : position + rowstoshow;
    if (position > rows.length) position = 0
   
    // slice the array to get the correct records then join them using \n for output
    var newtxt = rows.slice(position, position+rowstoshow).join("\n")
    $("#box1").text(newtxt);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows=10 cols=60 id='box1'></textarea>
<button id='btn'>click me</button>

＆＃13;

要反转操作，请添加另一个按钮，并在其单击事件中减去要从位置显示的行数，检查< 0并重置为rows.length - rowstoshow（不仅仅是rows.length，如图所示）从那个位置）。

注意：由于这是一项家庭作业，而且您对编码相对较新，因此上述解决方案使用的是全局变量＆＃39; in＆＃34; real＆＃34;代码这不是最佳实践，您可能希望避免这些因为它们污染全局命名空间，因此您可以使用范围和/或命名空间来存储它们，甚至使用data-属性将它们直接存储在html中。 / p>

家庭作业分配：协助在jquery中放置一个running for循环

1 个答案: