javascript - 将 <ol> append 到 <div> 元素的 <li> 会导致恼人的错误

Question

这是我目前拥有的代码。

if (playerCode.length === 4) {

    $("div.codeOption, #inGameInstructions").css("display", "none");
    for (i = 0; i < playerCode.length; i++) {
        if (playerCode[i] === "red") {
            $("#playersFinalCode").append("<li class= 'playerCodeChoice'>" + "<div style='background-color:#B30C15; width:20px; height:20px; border-radius:5px; box-shadow: 2px 2px 2px #888888;'>"
                "</div>" + "<br/>" + "</li>");
        } else if (playerCode[i] === "green") {
            $("#playersFinalCode").append("<li class= 'playerCodeChoice'>" + "<div style='background-color:#0D822C; width:20px; height:20px; border-radius:5px; box-shadow: 2px 2px 2px #888888;'>"
                "</div>" + "<br/>" + "</li>");
        } else if (playerCode[i] === "orange") {
            $("#playersFinalCode").append("<li class= 'playerCodeChoice'>" + "<div style='background-color:#E86E02; width:20px; height:20px; border-radius:5px; box-shadow: 2px 2px 2px #888888;'>"
                "</div>" + "<br/>" + "</li>");
        } else if (playerCode[i] === "yellow") {
            $("#playersFinalCode").append("<li class= 'playerCodeChoice'>" + "<div style='background-color:#F2E311; width:20px; height:20px; border-radius:5px; box-shadow: 2px 2px 2px #888888;'>"
                "</div>" + "<br/>" + "</li>");
        } else if (playerCode[i] === "blue") {
            $("#playersFinalCode").append("<li class= 'playerCodeChoice'>" + "<div style='background-color:#0D1782; width:20px; height:20px;border-radius:5px; box-shadow: 2px 2px 2px #888888;'>"
                "</div>" + "<br/>" + "</li>");
        } else {
            $("#playersFinalCode").append("<li class= 'playerCodeChoice'>" + "<div style='background-color:#570D82; width:20px; height:20px;border-radius:5px; box-shadow: 2px 2px 2px #888888;'>"
                "</div>" + "<br/>" + "</li>");
        }

        $(document).on("click", ".playerCodeChoice, #toMainMenu", function() {
            $(".playerCodeChoice").remove();
        });
    }
}

当前所做的是遍历一个颜色数组，将每个元素(总共四个)放入一个有序列表中，其中一个元素对应于在数组中找到的颜色。这就是它目前正在做的(例如)。 这些都是正方形，

1. [yellow]

2. [orange]

3. [yellow]

4. [blue]

现在这在大多数情况下都有效，当我单击任何彩色方 block 以及返回主菜单时，列表会被清除，但是当我再次选择四种新颜色时，列表不会从哪里开始应该是它向下移动并从最后一个列表停止的地方开始，每次我再次运行该过程时它都会将列表向下移动得越来越远。关于什么可能导致这种情况的任何想法？也是奖金问题。最终我想将四种颜色显示为一个列表，10 次，比如，

1. [yellow], [orange], [yellow], [blue] 
2. etc.
3. etc.
etc.

如果我想做类似的事情，它会像连接它一样简单，以便创建多个 s (10) 因为最终我要让计算机猜测玩家的颜色选择，然后进行这些猜测显示在屏幕上。因此，为什么我现在要玩这个设置。任何帮助深表感谢。谢谢!

如果您需要全貌，这就是我正在做的工作。 http://codepen.io/terratunaz/pen/pbuyA

Answer 1

<br>不允许进入 <li> .所以浏览器把所有的 <br> <li> 之外的标签元素。当你做 $(".playerCodeChoice").remove()它删除了所有 <li> s，但是 <br>还剩下 s。

解决方案是删除+ "<br/>"来自你的 JS。

顺便说一句，if/else 中的所有重复代码块很麻烦。使用 CSS 类来分配样式:

.playerCodeChoice div {
    width:20px; 
    height:20px; 
    border-radius:5px; 
    box-shadow: 2px 2px 2px #888888;
}
.playerCodeChoice div.red {
    background-color: #B30C15;
}
.playerCodeChoice div.green {
    background-color: #0D822C
}
....


$("#playersFinalCode").append("<li class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></li>");