如何交換兩個元素的位置，包括他們的類/ ids與onclick？

我想用onclick事件切換兩個div的位置。如何交換兩個元素的位置，包括他們的類/ ids與onclick？

divs具有相同的基本格式（寬度，高度），但額外的類和id會改變它們的外觀。

所以，我有兩個函數成功地改變了ID和類名，但沒有視覺上的改變。

在這裏，他們是：

function whenClickedFilled(){ 
    console.log("filled"); 
    this.firstElementChild.id = "empty"; 
    this.firstElementChild.className = "puzzlepiece emptyDivClass"; 

} 

function whenClickedEmpty(){ 
    console.log("empty"); 
    this.firstElementChild.id = "filled"; 
    this.firstElementChild.className = "puzzlepiece"; 

}

我想知道最好的辦法是的onclick類/ IDS之間交替什麼。

這是我的js fiddle。

來源

2014-06-10 user2373912

所以應該發生什麼？你知道'emptyDivClass'沒有樣式，它是點擊應用的類，添加樣式會有所作爲 - > ** http：//jsfiddle.net/r84BZ/1/**？ – adeneo

我在你的完整代碼中看到你正在爲多個元素分配id「filled」和「empty」。這是不好的做法。 Id屬性應始終是唯一的。您應該改用類。 – Johnsonium

我們是否可以添加一些建議以使其超出問題範圍？ – cgatian

我認爲你真正想要做的不是交換類和id，而是交換元素本身。這將確保div中包含的數字也隨交換轉移。

您仍然需要執行邏輯檢查，以查看元素是否應該能夠與空白塊交換，並且當您單擊空白空間時看起來像是一個錯誤。但是，這應該讓你走上正軌。我建議放置一個調試器語句，通過打開開發工具的代碼逐步完成。這將有助於瞭解發生了什麼。祝你好運。

function whenClickedFilled(){ 
     console.log("filled"); 
     //Get the div element and parent 
     //Then determine the parent of the empty div 

     var clickedDiv = this.firstChild; //this refers to the TD clicked, get the child div element 
     var clickedDivParent = this; //this is TD 
     var emptyDivParent = emptyDiv.parentElement; //stored the empty div reference into a global, retrieve the parent as this could change 

     //Remove the empty and clicked div's from their container 
     emptyDivParent.removeChild(emptyDiv) 
     clickedDivParent.removeChild(clickedDiv); 

     //Add the elements back to the containers but swapped 
     clickedDivParent.appendChild(emptyDiv); 
     emptyDivParent.appendChild(clickedDiv); 
    }

http://jsfiddle.net/tWrD2/

來源

2014-06-11 00:41:28 cgatian

謝謝大家的幫助！ @cgatian：是的，我很樂意提供建議。我正在自己的工作中進行練習，但是很少有人會親自去尋求幫助，我發現互聯網只是非常有幫助。 – user2373912

我沒有意識到下面使用的@RobG的replaceChild方法。使用它來代替remove/append – cgatian

我想切換兩個div的位置與onclick事件

如果你想交換兩個相鄰節點，你可以做簡單的東西作爲：

function swapAdjacent(el0, el1) { 
    el0.parentNode.insertBefore(el1, el0); 
}

如果你想交換t中的任何兩個元素他DOM，你可以這樣做：

// Swap the postion in the DOM of el0 and el1 
function swapElements(el0, el1) { 

    // Create a temp node that can replace el0 
    var tmp = el0.cloneNode(false); 

    // Replace el0 with tmp 
    el0.parentNode.replaceChild(tmp, el0); 

    // Replace el1 with el0 
    el1.parentNode.replaceChild(el0, el1); 

    // Replace temp node with el1 
    tmp.parentNode.replaceChild(el1, tmp); 
}

和一些測試標記：

<div id="d0">div 0</div> 
<div id="d1">div 1</div> 
<button onclick=" 
    swapElements(document.getElementById('d0'), document.getElementById('d1')); 
">Swap d0, d1</button> 
<button onclick=" 
    swapAdjacent(document.getElementById('d0'), document.getElementById('d1')); 
">Swap adjacent</button>

過程中的兩個元素交換必須與周圍的元素，例如一致你不能用一個div來交換一個選項元素，並期望一切正常，但你可以用一個div來交換一個span。

如果你想通過點擊一個或另一個交換元素：

<div id="d0" onclick="swapElements(this, document.getElementById('d1'))">div 0</div> 
<div id="d1" onclick="swapElements(this, document.getElementById('d0'))">div 1</div>

來源

2014-06-11 02:24:34 RobG

我發現fuell提供時，我正在尋找FO實際HTML交換一個很好的解決方案：

<div id="div_1">THIS IS DIV 1</div> 
<div id="div_2">THIS IS DIV 2</div> 
<a href="javascript://" class="go-swap">Go Swap!</a> 

$(document).ready(function() { 
    $(".go-swap").click(function() { 
     $("#div_1").removeAttr("style"); 
     $("#div_2").removeAttr("style"); 
     var tmp = $("#div_1").html(); 
     $("#div_1").empty().append($("#div_2").html()); 
     $("#div_2").empty().append(tmp); 
    }); 
});

來源

2015-08-05 08:53:42 Artemis

如何交換兩個元素的位置，包括他們的類/ ids與onclick？

回答

相關問題