Question

到处搜索但找不到这个问题的答案。当我点击一个按钮时，我希望内容从一个div移动到另一个div，然后再次单击以向后移动。可以让初步移动没有问题，但这是回归。

到目前为止，这是我的代码......

$(document).ready(function(){
    $(function(){$('#button').click(function() {
       $(this).val() == "Move Content" ? initial_move() : move_back();
        });
    });

    function initial_move() {
        $('#button').val("Move Back");
        $("#two").append($("#toggle_txt").html());  
        $('div#one #toggle_txt').remove();
    };

    function move_back() {
        $('#button').val("Move Content");
        $("#one").append($("#toggle_txt").html());  
        $('div#two #toggle_txt').remove();
    };
});


<input type="button" value="Move Content" id="button" /><br/><br/>

<div id="one">
    <p>Div One permanent text</p>
    <p id="toggle_txt">Text to toggle between the two</p>
</div>
<br/>
<div id="two">
    <p>Div Two permanent text</p>
</div>

http://jsfiddle.net/eBuAz/

我不明白为什么这段代码不起作用。非常感谢任何帮助。

由于

Answer 1

当你这样做时

$('div#one #toggle_txt').remove();

您实际上是从DOM中删除它，因此没有要添加的文本。

Answer 2

jQuery(document).ready(function ($) 
{
    $(function(){$('#button').click(function()
    {
        $(this).val() == "Move Content" ? initial_move() : move_back();
    });
    });

    function initial_move() {
        $('#button').val("Move Back");
        var toggle = $("#toggle_txt");
        $("#two").append(toggle).html();
        $('div#one #toggle_txt').remove();
        toggle.attr('id', "toggle_txt");
    };

    function move_back() {
        $('#button').val("Move Content");
        var toggle = $("#toggle_txt");
        $("#one").append(toggle).html();  
        $('div#two #toggle_txt').remove();
        toggle.attr('id', "toggle_txt");
    };
});

切换内容从一个div到另一个div的移动

2 个答案: