在javascript中切换id名称

使用html和javascript处理国际象棋棋盘。我正在尝试添加一个函数，以便用户可以翻转开发板的角度并运行成我理解的小故障，但无法弄清楚如何解决。代码如下....在javascript中切换id名称

function flipBoard(){ 

    document.getElementById("a8").id = "h1"; 
    document.getElementById("a7").id = "h2"; 
    document.getElementById("a6").id = "h3"; 
    document.getElementById("a5").id = "h4"; 
    document.getElementById("a4").id = "h5"; 
    document.getElementById("a3").id = "h6"; 
    document.getElementById("a2").id = "h7"; 
    document.getElementById("a1").id = "h8"; 

    document.getElementById("h8").id = "a1"; 
    document.getElementById("h7").id = "a2"; 
    document.getElementById("h6").id = "a3"; 
    document.getElementById("h5").id = "a4"; 
    document.getElementById("h4").id = "a5"; 
    document.getElementById("h3").id = "a6"; 
    document.getElementById("h2").id = "a7"; 
    document.getElementById("h1").id = "a8"; 
}

所以....我想这会工作得很好，但发现这肆虐我的船上的位置半白，半黑片在板的两面。问题当然是原来的“a1”正方形重新命名为“h8”后，现在有两个“h8”正方形，并且在代码末尾切换回“a1”。

我不知道如何让id名称同时切换，否则我必须添加一大堆代码，将id名称切换到某个第三个名称作为占位符，然后将它们切换到所需的名称。可能，但乏味，我觉得必须有一个更简单的方法来做到这一点。

任何想法？

来源

2014-09-03 SteampunkWizard

您可以通过在一个循环程序产生的ID值降低当前代码的重复：

function flipBoard(){ 
    var a, h, aVal, hVal, aEl, hEl; 

    for(a = 8, h = 1; a > 0; --a, ++h) { 
     aVal = 'a' + a; 
     hVal = 'h' + h; 

     // Store off the current values 
     aEl = document.getElementById(aVal); 
     hEl = document.getElementById(hVal); 

     // swap them 
     aEl.id = hVal; 
     hEl.id = aVal; 
    } 
}

demo fiddle

来源

2014-09-03 03:58:12 dc5

@SampampWizard - 取决于你已经实现了多少代码，以及作为视图的一部分操作了多少数据/模型，你可能需要考虑将视图与模态分离。这会给你一个标准的，静态的游戏逻辑板和一个简单的方法来操纵视图而不会以任何方式影响它：[example fiddle]（http://jsfiddle.net/5fayL1uj/1/） – dc5 2014-09-03 18:03:20

非常感谢！这工作完美。我很担心是否会在代码中添加b-g文件，但完全没有问题。目前，如果我已经在棋盘上有棋子，棋盘ID将会切换，但棋子不会。我的下一步是运行一个功能，将当前的电路板位置保存为两个阵列和电路板正方形阵列并重新加载电路板位置。目前，我无意将引擎挂接到该主板上。这个程序的目的是给我一个免费的模板用于教授国际象棋。 – SteampunkWizard 2014-09-03 18:29:27

将对元素的引用保存在变量中。例如：

function flip(){ 
    var aEight = document.getElementById("a8"), 
     hOne = document.getElementById("h1"); 

    aEight.id = "h1"; 
    hOne.id = "a8"; 
}

通过分离查找元素和更改其id的步骤，您可以轻松地跟踪翻转的元素。

来源

2014-09-03 03:40:37 agconti

添加到这一点，我会用这些变量在您的应用程序，而不是只是在这个函数中，所以你只使用每平方一次的getElementById。或者将它们全部保存在一个二维数组变量中。 – Jason 2014-09-03 03:45:55

@ moo2u2伟大的一点。 – agconti 2014-09-03 03:56:32

在javascript中切换id名称

回答

相关问题