Question

问题

如何动态突出显示所选的td？

Codepen

代码

地图是随机生成的二维数组，如下所示：

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

我可以将玩家每回合移动3个方格，其中一个方格是他的实际位置。我使用此函数来调用运动：

function movements(character){
    var possibleMovement=3;
    let coord=character.actualPosition; 
        let row = $($("#tableGame tr")[coord.row]);
        let cell = $($("td", row)[coord.cell]);

    forward(row, cell, possibleMovement, character);
    backward(row, cell, possibleMovement, character);
    goUp(row, cell, possibleMovement, character);
    goDown(row, cell, possibleMovement, character);
};

以及下面的功能，我试图突出显示角色实际可以移动的单元格。

function forward(row, cell,possibleMovements, character){
    for(var i = 0; i<possibleMovements; i++){
        cell = $($("td", row)[coord.cell+i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
    };
};

function backward(row, cell, possibleMovements, character){
    for(var i = 0; i>=possibleMovements; i--){
        console.log('sei qua');
        cell = $($("td", row)[coord.cell+i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
    };
};

任务

我需要突出显示角色附近的磁贴：

character.actualPosition
下面的两个图块
在他右边的两块瓷砖
在他的左边有两个瓷砖

这是两个“测试功能”

function forward(row, cell,possibleMovements, character){
    for(var i = 0 ; i<possibleMovements; i++){
        cell = $($("td", row)[coord.cell +i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
        console.log([coord.row] + "<<<row" + [coord.cell+i] + "<<<cell");
    };
};

function backward(row, cell, possibleMovements, character){

    possibleMovements= possibleMovements*-1;

    for(var i = 0 ; i>possibleMovements; i--){
        cell = $($("td", row)[coord.cell+i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
        console.log([coord.row] + "<<<row" + [coord.cell-i] + " <<<cell");
    };
};

Answer 1

最后我找到了答案。我想说谢谢 to this post ，因为这对我找到可行的解决方案很有帮助。

突出显示角色附近磁贴的最后功能是

function movements(){
    let possibleMovement=3;
    let row = character.actualPosition.row;
    let cell = character.actualPosition.cell;
    forward(possibleMovement, row, cell);
    backward(possibleMovement, row, cell);
    goUp(possibleMovement, row, cell);
    goDown(possibleMovement, row, cell);

};

function forward(possibleMovements, row, cell){

    let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = 0; i<possibleMovements; i++){
        let cell = table.rows[charRow].cells[charCell+i]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

function backward(possibleMovements, row, cell){
    let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = -1; i>(possibleMovements*-1); i--){
        let cell = table.rows[charRow].cells[charCell+i]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

function goUp(possibleMovements, row, cell){
   let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = -1; i>(possibleMovements*-1); i--){
        let cell = table.rows[charRow+i].cells[charCell]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

function goDown(possibleMovements, row, cell){
    let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = -1; i<possibleMovements; i++){
        let cell = table.rows[charRow+i].cells[charCell]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

主要解决方案是理解这4行代码，以及如何遍历它们：

    var table = $("table")[0];
    let cell = table.rows[charRow].cells[charCell+i]; // This is a DOM "TD" element
    let $cell = $(cell);
    $(cell).addClass('possibleSteps');

在表格中动态突出显示td

1 个答案: