[英]Flip text input fields between elements, including user-created value attribute
Hi I'm trying to flip the input fields between two div elements. 嗨,我正在尝试在两个div元素之间翻转输入字段。 However, if a user enters text into the fields, the text disappears after the flip happens. 但是,如果用户在字段中输入文本,则文本在翻转后会消失。 Is there a way to make sure this value attribute is flipped too? 有没有办法确保此value属性也被翻转? Thanks. 谢谢。
Javascript: Javascript:
function Flip ()
{
var oldslave = $('div.slave').html();
var oldmaster = $('div.master').html();
$('div.slave').html(oldmaster);
$('div.master').html(oldslave);
}
HTML: 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>
You can use clone method like this: 您可以使用如下克隆方法:
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/ http://jsfiddle.net/MaESg/
There is also another variant to achieve the same without using clone: 还有另一种无需使用克隆即可实现相同目的的变体:
function Flip() {
$('.master').find('input').appendTo('.slave').prev().appendTo('.master');
}
This one is preferable because appending (moving) nodes much more effective than recreating. 这是可取的,因为附加(移动)节点比重新创建更有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.