计算号码 ID

Question

我不太确定如何在标题中表达这一点，因此感谢您点击此处。

那么现在我的问题是：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
    .block {
        background-color: black;
    }
</style>
<table border='1px'>
    <tr>
        <td id='11'></td>
        <td id='12'></td>
        <td id='13'></td>
        <td id='14'></td>
        <td id='15'></td>
    </tr>
    <tr>
        <td id='21'></td>
        <td id='22'></td>
        <td id='23'></td>
        <td id='24'></td>
        <td id='25'></td>
    </tr>
    <tr>
        <td id='31'></td>
        <td id='32'></td>
        <td id='33' class="block"></td>
        <td id='34'></td>
        <td id='35'></td>
    </tr>
    <tr>
        <td id='41'></td>
        <td id='42'></td>
        <td id='43'></td>
        <td id='44'></td>
        <td id='45'></td>
    </tr>
    <tr>
        <td id='51'></td>
        <td id='52'></td>
        <td id='53'></td>
        <td id='54'></td>
        <td id='55'></td>
    </tr>
</table>
<button onclick="blockUp()">Up</button>
<button onclick="blockDown()">Down</button>
<button onclick="blockLeft()">Left</button>
<button onclick="blockRight()">Right</button>
<script>
var blockUp = function() {
    var oldBlock = document.getElementsByClassName("block")[0].id;
    var newBlock = Math.floor(oldBlock + 1);
    document.getElementById(newBlock).classList.add("block");
    document.getElementById(oldBlock).classList.remove("block");
}

    
</script>
</body>
</html>

此代码不完整，因为我想先解决这个问题。

我想使用 Math.floor 获取某个 ID（因此，ID 为数字），并对其进行操作。更具体地说，我想找到当前具有 .block class 的单元格的 ID，使用 Math.floor(oldBlock + 1) 找到该单元格上方的单元格的 ID，删除 class，然后将 class 添加到新单元格。我使用了变量，以便该函数始终能够运行，而不是制作一百万个 if/else if/else 语句。

不幸的是，这不适用于我当前的代码。我怎样才能做到这一点？

感谢任何帮助！

Answer 1

你必须确保 "oldBlock" 包含一个数字，然后再尝试用它做数学运算（比如加 1）：

var oldBlock = +document.getElementsByClassName("block")[0].id;

这是一种方法。您也可以使用 parseInt():

var oldBlock = parseInt(document.getElementsByClassName("block")[0].id, 10);

"id" 属性的值将是一个字符串，因此如果您在加法运算中涉及它，JavaScript 会将其视为字符串连接。通过强制它首先是一个数字，你会得到你想要的效果。

计算号码 ID

Calculating Number IDs

javascript

class

dom