将项目从一个div移动到另一个div，然后使用jquery再次移回 [英] Move an item from one div to another and back again using jquery

问题描述

项目1

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

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

是的，我尝试了append()，它转到了i2，但是再次单击它并不会退回到i1

我该怎么做.

谢谢 吉恩

解决方案

<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>

参见 工作演示 .. >Item 1

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

When I click on Item 1 it should be deleted and moved to i2 and when I click on Item 1 again it must go back to i1

Yes, I tried append(), it goes to i2, but on clicking again it does not move back to i1

How do I get to do it.

Thanks Jean

解决方案

<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>

This will repeat the actions for the two clicks. For the first click e1 will be appended to i2, for the second click reverse of this happens, and third click it will repeat first click action and so on.

If you want to attach click event to the span then you can do like this

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

If you have repeating elements then you can give them a class name

<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>

See a working demo.

这篇关于将项目从一个div移动到另一个div，然后使用jquery再次移回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！