0

这是我在我的网站上的一些代码示例......这实际上持续了另外 12 次迭代。是否可以使用 for 循环来执行此操作？有没有更有效的方法？谢谢！

document.getElementById("1").onclick=function(){
    lyre[0]=Number(!lyre[0]);
    document.getElementById("1").innerHTML=String(lyre[0]);
}
    document.getElementById("2").onclick=function(){
    lyre[1]=Number(!lyre[1]);
    document.getElementById("2").innerHTML=String(lyre[1]);
}
document.getElementById("3").onclick=function(){
    lyre[2]=Number(!lyre[2]);
    document.getElementById("3").innerHTML=String(lyre[2]);
}
 document.getElementById("4").onclick=function(){
    lyre[3]=Number(!lyre[3]);
    document.getElementById("4").innerHTML=String(lyre[3]);
}
4

3 回答 3

2

在最基本的情况下，您可以执行以下操作：

function attachListener(lyre, lyreIndex, id) {

  document.getElementById(id).onclick = function() {
    // assign zero or one based on the current value:
    lyre[lyreIndex] = !lyre[lyreIndex] ? 0 : 1;

    // update the display of the value:
    document.getElementById(id).innerHTML = lyre[lyreIndex];
  }
}

for(var i = 0; i < lyre.length; i += 1) {
  attachListener(lyre, i, i + 1);
}

我已将代码修改为更惯用的 javascript。通常，您应该避免使用原始构造函数（例如Numberand String）并使用相同的文字版本。

还有其他方法可以使它更易于维护和惯用，但这应该可以满足您的需要。

如果您担心性能，通常不需要关心几十个事件侦听器。但是，如果您处理的不仅仅是这些，您应该考虑委派您的活动。这限制了离散事件侦听器的数量，同时保持相同的功能：

document.getElementById('parent').onclick = function(e) {
  var node = (e.target || e.srcElement),
      index = node.id;

  if(lyre[index] === undefined) { return; }

  lyre[index] = !lyre[index] ? 1 : 0;

  node.innerHTML = lyre[index];
};

parent所有元素共享的文档中某个节点的 ID在哪里。这是一个说明这个概念的工作 JSBin 。

于 2013-10-25T16:36:37.997 回答
1

是的，它可以for用来完成你想要做的事情。虽然它在性能方面不会更好，因为您将执行更多操作，但在代码组织方面要好得多。在大多数情况下，性能差异是无法察觉的，因此我真的建议您为此使用循环。

function setEvent(index) {
    var id = index + 1;
    document.getElementById(id).onclick=function(){
        lyre[index]=Number(!lyre[index]);
        document.getElementById(id).innerHTML=String(lyre[index]);
    }
}

for (var i = 0, j = lyre.length; i < j; i++) {
    setEvent(i);
}
于 2013-10-25T16:31:52.960 回答
0

每当我发现一个模式时，我首先会创建一个函数。然后我会使用“for”（如何查看其他答案）......这将使我的代码结构良好且易于维护。

但是，正如其他人所说，它在性能方面不会更好。

于 2013-10-25T16:39:30.227 回答