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.

如果我想做类似的事情就像挂钩一样简单，以便创建多个（10），因为最终我想让计算机猜出玩家的颜色选择，然后在屏幕上显示这些猜测。因此，为什么我现在正在玩这个设置。任何帮助深表感谢。谢谢！

如果您需要全面了解我正在做的事情。 http://codepen.io/terratunaz/pen/pbuyA

Answer 1

<br>内不允许

<li>。因此，浏览器将所有<br>标记放在<li>元素之外。当您执行$(".playerCodeChoice").remove()时，它会移除所有<li>，但<br>将被删除。

解决方案是从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>");

使用<li>的<div>元素追加<ol>会导致恼人的错误</div> </li> </ol>

1 个答案: