javascript - 如何将js函数分配给一个类并在单击时获取id

Question

我正在开发一个计算器，并且每个 id 都有 mousedown 和 mouseup 函数。有没有什么方法可以清理它，并在单击类元素​​时调用一个函数，并能够获取在函数内单击的 id？

这是 myfiddle calculator 的链接

另外，我注意到，当我将 javascript 直接放入 JS 框中时，它不起作用，但是作为嵌入 html 中的脚本，它可以正常工作。有人能解释一下为什么吗？

 <tr>
    <td class='noborder' colspan='1' rowspan='2'> </td>
    <td id='1' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>1</td>
    <td id='2' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>2</td>
    <td id='3' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>3</td>
    <td id='plus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>+</td>
    <td class='noborder' colspan='1' rowspan='2'> </td>
  </tr>


<script>
function mouseDown(id) {
document.getElementById(id).style.backgroundColor = "gray";
}

function mouseUp(id) {
document.getElementById(id).style.backgroundColor = "white";
}
</script>

Answer 1

我实现了一种如何在具有类的所有元素上添加 mousedown 和 mouseup 事件的方法:

var elements = document.getElementsByClassName("buttons");
for (var i = 0; i < elements.length; i++) {
    elements[i].onmousedown = function() {
        mouseDown(this.id);
        mouseUp(this.id);
    }
}

我在 w3schools.com 上测试过它.

(另外，我不知道你所说的 JS Box 是什么意思。抱歉。)