在javascript中切换id名称

Switching id names in javascript

本文关键字：id 名称 javascript      更新时间：2023-09-26

使用html和javascript在棋盘上工作。我正在尝试添加一个功能，这样用户就可以翻转棋盘的视角，遇到我理解但不知道如何解决的故障。代码如下。。。。

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名称切换到第三个名称作为占位符。可能，但乏味，我觉得必须有一个更简单的方法来做到这一点。

有什么想法吗？

您可以通过在循环中以编程方式生成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;
    }
}

演示小提琴

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

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

通过将查找元素和更改其id的步骤分开，您将能够轻松地跟踪翻转的元素。

相关文章：