计算数字ID

问题描述:

我不太确定如何在标题中对此进行说明,所以非常感谢您点击此处。计算数字ID

所以现在我的问题:

<!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类的单元的ID,找到使用Math.floor(oldBlock + 1)之上的单元的ID,从原单元中移除该类,然后添加该类到新的小区。我使用了变量,以便该函数始终能够运行,而不是制作一百万个if/else if/else语句。

不幸的是,这不适用于我目前的代码。我将如何能够做到这一点?

任何帮助表示赞赏!

+0

'oldBlock'是一个连接1的字符串。 – j08691 2015-02-08 21:13:41

你必须确保“oldBlock”载试图做数学与它(如添加1)之前的数字:

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

这就是做这件事的一种方式。你也可以使用parseInt()

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

的“ID”属性的值是一个字符串,因此,如果您参与,在加法运算的JavaScript会将其视为字符串连接。通过强制它成为一个数字,你会得到你想要的效果。

+0

除了他的'blockUp'似乎将选中的单元移动到右侧:/ – j08691 2015-02-08 21:16:50

+0

感谢您的快速回复!我添加了+号,现在它工作正常。另外,我在测试j08691中想到了...... – JoesCode 2015-02-08 21:19:53