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

到处搜寻，但无法找到答案这个问题。当我点击一个按钮时，我希望内容从一个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/

我不明白为什么这个代码不应该工作。任何帮助不胜感激。

感谢

来源

2013-07-28 Paul Rich

当你

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

你实际上是从DOM删除这一点，所以没有被添加回文本。

来源

2013-07-28 10:22:17 defau1t

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"); 
    }; 
});

来源

2013-07-28 10:27:22 Samurai

这真是太棒了@武士非常感谢。我正在研究你的答案，试图让我的头脑围绕着逻辑。在initial_move（）中，我们从＃1中删除了#toggle_txt，但是我们是不是将一个id为toggle_txt的元素应用于已经拥有它的元素？它工作的很好，所以我可以使用它，但很好，让我的头脑中的逻辑。我很感激你花时间。 –

感谢@ defau1t我在jQuery的相当多的新手，所以我可以看到你在说什么，这是有道理的。武士提出了一个解决方案。我在源代码中注意到div的位置并没有改变，但它在视觉上移动了。感谢您的评论。 –

你要做的是将元素1的内容添加到元素2中，然后使用id toggle_txt删除元素。所以当你再次点击（回退）时，实际上没有带有toggle_txt标识的元素。我添加的是我将元素存储在一个变量中，然后在删除具有该ID的前一个元素后，将其ID设置为toggle_txt。 – Samurai

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

回答

相关问题