<ol> 附加元素<li> <div> 会导致烦人的错误

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]

现在，这在很大程度上是有效的，当我点击任何一个彩色方块时，以及当我返回主菜单时，列表都会清除，但当我再次选择四种新颜色时，列表并没有从它应该开始的地方开始。它会向下移动，从上一个列表结束的地方开始，每次我再次运行该过程时，它都会将列表越来越向下移动。关于是什么原因导致了这种情况，有什么想法吗？还有奖金问题。最终，我想把四种颜色显示为一个列表，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。

解决方案是从JS中删除+ "<br/>"。

顺便说一句，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>");