javascript - jQuery hasClass 不起作用或 if 语句有缺陷

Question

我正在开发一款战舰游戏。当前的 genShips 函数应该检查坐标 x:y 的 div 及其周围是否已经被标记。如果它们被标记，则尝试使用新的 x 和 y，如果它们未标记，即附近没有船只，则在 x:y、x+1:y 上放置一艘船。船只始终为 1x2 且水平。 Angular 可以接触，但边不能接触。

这是 http://jsfiddle.net/u43703ms/1/ 上的完整代码

以及函数本身。

function genShips() {
var gridLength = $("#option").val();
while (true) {
    var y = Math.floor(((Math.random() * gridLength)));
    var x = Math.floor(((Math.random() * gridLength)));
    var x2 = x + 1;
    $("#info").html(x + ":" + y);

    if 
    (
    $("#grid .cell[data-x="+x+"][data-y="+y+"]").hasClass("ship")
    || ($("#grid .cell[data-x="+x+"][data-y="+(y-1)+"]").hasClass("ship"))
    || ($("#grid .cell[data-x="+x+"][data-y="+(y+1)+"]").hasClass("ship"))
    || ($("#grid .cell[data-x="+(x-1)+"][data-y="+y+"]").hasClass("ship"))
    || ($("#grid .cell[data-x="+(x+1)+"][data-y="+y+"]").hasClass("ship"))
    || ($("#grid .cell[data-x="+(x2-1)+"][data-y="+y+"]").hasClass("ship")) 
    || ($("#grid .cell[data-x="+x2+"][data-y="+(y+1)+"]").hasClass("ship"))
    || ($("#grid .cell[data-x="+x2+"][data-y="+(y-1)+"]").hasClass("ship"))
    || ($("#grid .cell[data-x="+(x2+1)+"][data-y="+y+"]").hasClass("ship"))
    ) 

    {
        console.log("dont print ship");
    }
    else {
        console.log("print ship");
        $("#grid .cell[data-x="+x+"][data-y="+y+"]").attr("class", "ship");
        $("#grid .cell[data-x="+x2+"][data-y="+y+"]").attr("class", "ship");
        break;
    }

}

}

Generate 为您提供所需的网格大小(从下拉菜单中选择)，并且 genShips 尝试将一艘船放在网格上。现在，由于某种原因，它只是在 div 上看不到“ship”类，或者我的 if 语句有缺陷。

为了更好地解释我的 if 语句，它基本上控制 x2(第二个盒子)的 x;y 上、下、左、右以及上下和右上是否有“船”。

Answer 1

更改:-

.attr("class", "ship");

至:-

.addClass("ship");

在完整代码中

function klikk(x, y) {
    $(".cell").click(function() {
        $(this).attr("class", "ship");
    });
}

.attr("class", "ship"); 正在替换所有类 (.cell)，仅留下 .ship。所以你的 .cell hasClass .ship 永远不会被发现。