Question

这是Ping Pong测试。每次我单击“开始”按钮并输入一个数字时，它只会添加到列表中。如何在每次输入后重置列表？

$(document).ready(function() {
    $("#Start").click(function() {
        var number = parseInt(prompt("Please pick an integer to play."));

        for(index = 1; index <= number; index +=1) {
            if (index % 15 === 0) {
                $('#list').append("<li>" + "ping-pong" + "</li>");
            } else if (index % 3 === 0) {
                $("#list").append("<li>" + "ping" + "</li>");
            } else if (index % 5 === 0 ) {
                $("#list").append("<li>" + "pong" + "</li>");
            } else {
                $("#list").append("<li>" + index + "</li>");
            }
        }
    });
});

Answer 1

要重置（清空）列表，请使用

$('#list').empty();

Answer 2

在提示之前，请从li

中删除#list元素

$("#Start").click(function() {
    $("#list li").remove();
    var number = parseInt(prompt("Please pick an integer to play."));

Answer 3

不要执行.append，而是执行.html（）

.append会添加一个新的子元素，但.html（）会清除其所有子元素，并将您添加的新元素作为其子元素。

试试：

$(document).ready(function() {
    $("#Start").click(function() {
        var number = parseInt(prompt("Please pick an integer to play."));

        for(index = 1; index <= number; index +=1) {
            if (index % 15 === 0) {
                $('#list').html("<li>" + "ping-pong" + "</li>");
            } else if (index % 3 === 0) {
                $("#list").html("<li>" + "ping" + "</li>");
            } else if (index % 5 === 0 ) {
                $("#list").html("<li>" + "pong" + "</li>");
            } else {
                $("#list").html("<li>" + index + "</li>");
            }
        }
    });
});

每次输入后如何重置列表？

3 个答案: