javascript - 如何用onclick交换两个元素的放置，包括它们的类/id？

我正在尝试通过onclick事件切换两个div的位置。

div具有相同的基本格式（宽度，高度），但是附加的类和id会改变它们的外观。

因此，我有两个函数可以成功更改id和class名称，但是没有视觉上的改变。

他们来了：

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的类/ id之间交替。

这是我的js fiddle。

最佳答案

我认为您真正要做的不是交换类和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/

关于javascript - 如何用onclick交换两个元素的放置，包括它们的类/id？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24152459/