在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名稱

回答

相關問題