javascript - 在元素之间翻转文本输入字段，包括用户创建的值属性

Question

您好我正在尝试翻转两个 div 元素之间的输入字段。但是，如果用户在字段中输入文本，则文本会在翻转发生后消失。有没有办法确保这个值属性也被翻转？谢谢。

Javascript：

function Flip ()
{
    var oldslave = $('div.slave').html();
    var oldmaster = $('div.master').html();
    $('div.slave').html(oldmaster);
    $('div.master').html(oldslave);
}

HTML：

<div class="master">
    <input type="text" name="master" id="master" size="42">
</div>
<input type="button" id="button1" onclick="Flip()" value="Flip">
<div class="slave">
    <input type="text" name="slave" id="slave" size="42" class="slavefield">
</div>

Answer 1

您可以使用这样的克隆方法：

function Flip() {
    var oldslave = $('div.slave input').clone();
    var oldmaster = $('div.master input').clone();
    $('div.slave').html(oldmaster);
    $('div.master').html(oldslave);
}

http://jsfiddle.net/MaESg/

还有另一个变体可以在不使用克隆的情况下实现相同的效果：

function Flip() {
    $('.master').find('input').appendTo('.slave').prev().appendTo('.master');
}

这个更可取，因为附加（移动）节点比重新创建更有效。

http://jsfiddle.net/MaESg/1/