如何在 Javascript 中使用 getAttribute 和 indexOf答案

【问题标题】：How to use getAttribute and indexOf in Javascript如何在 Javascript 中使用 getAttribute 和 indexOf
【发布时间】：2017-05-03 01:04:34
【问题描述】：

我正在尝试制作十五个谜题，但控制台显示“可移动”功能存在错误。如果函数“movable”是与未占用的瓷砖相邻的瓷砖（不是平铺的，而是水平和垂直的方式），则应该返回。因此，这会导致“洗牌”和“移动”中的错误。这段代码有问题吗？抱歉，代码有点长。谢谢。

(function(){
'use strict';

var unoccupied_x = 3;
var unoccupied_y = 3;

window.onload = function(){
    createPuzzle();
    document.getElementById("shufflebutton").onclick = shuffle;
};

function createPuzzle() {
    var pieceNum = 0;

    for (var i = 0; i < 4; i++){
        for (var j = 0; j < 4; j++){
            var tile = document.createElement("div");
            tile.classList.add("piece");

            tile.style.top = 100*i + "px";
            tile.style.left = 100*j + "px";
            tile.style.backgroundPosition = (0 - 100 * j) + "px"+ " " + (0 - 100 * i) + "px";
            tile.setAttribute("id","square" + "_" + j + "_" + i);
            pieceNum++;
            tile.innerHTML = pieceNum;

            tile.onclick = clickTile;

            if (i != 3 || j != 3){
              document.getElementById("puzzlearea").appendChild(tile);  
            }

        }
    }
}

function clickTile(){
    move(this);
}

function shuffle(){
    for (var i = 0; i < 1000; i++){
        var neighbors = searchNeighbors();
        var random = parseInt(Math.random() * neighbors.length);
        var tile = document.getElementById(neighbors[random]);

        move(tile);
    }
}

function searchNeighbors() {
    var up = 'square_' + unoccupied_x + "_" + (unoccupied_y - 1);
    var right = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;
    var down = 'square_' + unoccupied_x + "_" + (unoccupied_y + 1);
    var left = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;

    var neighborTiles = [up, down, left, right];
    var output = [];
    for( var i = 0; i < neighborTiles.length; i++){
        if(document.getElementById(neighborTiles[i]) != null){
            output.push(neighborTiles[i]);
        }    
    }
    return output;
}

function move(tile){
    if(movable(tile)){
        var originalX = parseInt(tile.style.left) /100;
        var originalY = parseInt(tile.style.top) / 100;
        var forSetAttributeX = unoccupied_x;
        var forSetAttributeY = unoccupied_y;

        tile.style.top = unoccupied_y * 100 + "px";
        tile.style.left = unoccupied_x * 100 + "px";
        unoccupied_x = originalX;
        unoccupied_y = originalY;
        tile.setAttribute("id", forSetAttributeX + "_" + forSetAttributeY);
    }
}

function movable(tile){
    var neighbors = searchNeighbors();
    return neighbors.indexOf(tile.getAttribute("id")) > -1 ;
}

})();

HTML 在下面（以防万一）

<head>
    <title>Fifteen Puzzle</title>

    <link href="fifteen.css" type="text/css" rel="stylesheet" />
    <script src="fifteen.js" type="text/javascript"></script>
</head>

<body>
    <h1>Fifteen Puzzle</h1>

    <p>
        The goal of the fifteen puzzle is to un-jumble its fifteen squares
        by repeatedly making moves that slide squares into the empty space.
        How quickly can you solve it?
    </p>

    <div id="puzzlearea"></div>

    <p id="controls">
        <button id="shufflebutton">Shuffle</button>
    </p>

    <div id="output"></div>

</body>

CSS 是：

body{
    font-family: cursive, serif;
    font-size: 14pt;
    text-align: center;
}

#puzzlearea{
    height: 400px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.piece{
    width: 90px;
    height: 90px;
    position: absolute;
    background-image: url('background.jpg');
    border: 5px solid black;
}

【问题讨论】：

标签： javascript html css indexof getattribute

【解决方案1】：

您的 searchNeighbors 方法没有创建正确的 ID。为每个添加“square_”+。

var up = 'square_' + unoccupied_x + "_" + (unoccupied_y - 1);
var right = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;
var down = 'square_' + unoccupied_x + "_" + (unoccupied_y + 1);
var left = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;

highlight 和 unhighlight 也是未定义的。之后你仍然有问题，但它会随机播放。

【讨论】：

感谢您的解决方案。我错过了'square'，我将它们添加到我的代码中。现在，效果更好，但是当我运行“shuffle”时，仍然有错误......（我不需要考虑突出显示和取消突出显示......抱歉造成混乱）
shuffle() 如果磁贴为空，则不需要移动。 if(tile){ move(tile); }

【解决方案2】：

Title 存储一个 HTML 元素。您的包含邻居的输出存储了一个字符串数组。所以你用 indexOf 执行了错误的搜索

那么if else就没用了，直接return语句就可以了

return neighbours.indexOf(...) > -1

【讨论】：

感谢您的评论。根据您的建议，我进行了修改，但“可移动”仍然存在错误。（你可以在问题中看到我的修改）这段代码还是有问题吗。