Question

第1项

<div id=i2><span id=e2>Item 2</span></div>

当我点击第1项时，应将其删除并移至i2，当我再次点击第1项时，必须返回i1

是的，我试过了append()，它转到了i2，但再次点击它就没有回到i1

我该怎么做呢。

由于让

Answer 1

<script type="text/javascript">
$(function(){

    $("#i1").toggle(function(){
        $("#e1").appendTo("#i2");
    },
    function(){
        $("#e1").appendTo($(this));
    }); 
});
</script>
<div id=i1><span id="e1">Item 1</span></div>
<div id=i2><span id="e2">Item 2</span></div>

这将重复两次点击的操作。对于第一次单击，e1将附加到i2，对于第二次单击反向发生这种情况，第三次单击它将重复第一次单击操作，依此类推。

如果您想将点击事件附加到范围，那么您可以这样做

$("#e1").toggle(function(){
        $(this).appendTo("#i2");
    },
    function(){
        $(this).appendTo($("#i1"));
    });

如果你有重复的元素，那么你可以给他们一个类名

<script type="text/javascript">
$(function(){

    $("span.clickspan").toggle(function(){
        $(this).appendTo("#i2");
    },
    function(){
        $(this).appendTo($("#i1"));
    }); 
});
</script>
<div id=i1>
    <span id="e1" class="clickspan">Item 1</span>
    <span id="e2" class="clickspan">Item 1</span>
    <span id="e3" class="clickspan">Item 1</span>
    <span id="e4" class="clickspan">Item 1</span>
    <span id="e5" class="clickspan">Item 1</span>
</div>
<div id=i2><span id="e6">Item 2</span></div>

查看 working demo 。

Answer 2

因为文本“Item 1”成为div（i2）的一部分。

将项目从一个div移动到另一个div，然后使用jquery再次返回

2 个答案: