Question

我正在努力解决这个问题一段时间。可以说，我在containerA和containerB中分别有imageA和imageB。另外，我有containerC。

我想做的是：

点击图片A＆gt; imageB从containerB移动到containerC。 imageA留在containerA
再次点击imageA＆gt; imageB从containerC移回到containerB。
点击图片B＆gt; imageA从containerA移动到containerC。
等

此时，我可以将imageA和imageB移动到containerC，但我无法将它们移回原来的位置。

HTML code：

<div id="containerA">
<img id="imageA" src="http://www.w3schools.com/images/tryitimg.gif" alt="imageA">
</div>

<div id="containerB">
<img id="imageB" src="http://www.w3schools.com/images/w3logotest2.png" alt="imageB">
</div>

JavaScript代码：

$(window).load(function(){
$("#imageA").on('click', function() {
   $("#imageB").appendTo($("#containerC"));
});

$("#imageB").on('click', function() {
   $("#imageA").appendTo($("#containerC"));
});
});

任何想法如何做到这一点？

Answer 1

将标记更改为

<div id="containerA">
    <img id="imageA" src="http://www.w3schools.com/images/tryitimg.gif" alt="imageA">
</div>

<div id="containerB">
    <img id="imageB" src="http://www.w3schools.com/images/w3logotest2.png" alt="imageB">
</div>

<div id="containerC"></div>

并做

$(function(){
    $("#imageA").on('click', function() {
        var container = $("#imageB").closest("#containerC").length ? $("#containerA") : $("#containerC");
        $("#imageB").appendTo(container);
    });

    $("#imageB").on('click', function() {
        var container = $("#imageA").closest("#containerC").length ? $("#containerB") : $("#containerC");
        $("#imageA").appendTo(container);
    });
});

FIDDLE

jQuery将对象移动到其他容器并返回

1 个答案: