有两个div 具有不同的 id,但绝对具有相同的结构。
<div id="block1">
<input type="text" class="class1" value="a">
<input type="text" class="class2" value="b">
<input type="checkbox" class="class3"> checkbox
<select class="class4">
<option value="0">White</option>
<option value="1">Brown</option>
<option value="2">Gray</option>
</select>
</div>
和
<div id="block2">
<input type="text" class="class1" value="a">
<input type="text" class="class2" value="b">
<input type="checkbox" class="class3"> checkbox
<select class="class4">
<option value="0">White</option>
<option value="1">Brown</option>
<option value="2">Gray</option>
</select>
</div>
在一页上。
我希望两个块看起来完全一样。因此,如果您在 block1 中更改某些内容,则在 block2 中会发生同样的事情,如果 block2 分别更改,则 block1 也会发生相同的更改。
所以,我想要
$("#block1").change(function () {
//apply ALL values from block1 to block2
});
$("#block2").change(function () {
//apply ALL values from block2 to block1
});
这包括来自输入文本的值,输入复选框甚至选定的选项选择值。所有输入的类别和类型分别完全相同,选择框中选项的数量和值也分别相同。
使用jQuery做到这一点的最短方法是什么?是否可以使用一个jQuery字符串"复制"值?
为所有元素创建一个通用更改处理程序:
向主要元素添加一个类:
<div id="block1" class="blockClass">
.JS
/* ":input" selector includes all form controls*/
$('.blockClass :input').change(function () {
var $this = $(this);
var $otherInput = $('.blockClass').not($this.closest('.blockClass')).find('.' + this.className);
var isCheckable = $this.is(':radio,:checkbox');
if (isCheckable) {
$otherInput.prop('checked', this.checked);
} else {
$otherInput.val($this.val());
}
})
演示:http://jsfiddle.net/5ghRS/
说可以使用单行复制策略,但仅适用于单一类型的输入标签。问题是不同输入标签的"值"必须以不同的方式处理。因此,要么在复制策略(回调或切换)中需要一个条件,要么需要不同的复制处理程序。
我会选择后者,因为您可以使用 jquery 选择器轻松识别不同类型的输入标签。
可以使用如下所示的内容来概括文本框值:
$(function() {
$(".class1").live('keypress', function() {
$(".class3").val($(this).val());
});
$(".class2").live('keypress', function() {
$(".class4").val($(this).val());
});
});
用于从第一个和第二个复制值的小提琴
这将正常工作。这里的第一行只是清除现有html
并从#block1
附加克隆的对象
您必须手动触发另一行代码 选择下拉列表的值
$("#block2").html('').append($("#block1").clone(true))
//$("#block2 select").val($("#block1 select").val())
更新:
$("#block1 select").each(function(){
var cls = $(this).attr("class");
$("#block2").find("select."+cls+"").val($(this).val());
});
更新:
它工作正常。 看小提琴
更新 2
还应复制将clone()
更新为clone(true)
以指定事件处理程序
让我们做这个动态。
对于<input type="text" />
信息将被传输onkeyup
,表示您输入的那一刻。
对于<input type="checkbox" />
信息将onchange
,表示此复选框的状态更改(选中或未选中)的时刻。
对于<select></select>
信息将onchange
,表示您更改所选值的那一刻。
<div id="block1">
<input type="text" id="id1" class="class1" value="a" onkeyup="Update()">
<input type="text" id="id2" class="class2" value="b" onkeyup="Update()">
<input type="checkbox" id="id3" class="class3" onchange="Update()"> checkbox
<select class="class4" id="id4" onchange="Update()">
<option value="0">White</option>
<option value="1">Brown</option>
<option value="2">Gray</option>
</select>
</div>
请注意,最好使用 ID
而不是 CLASS
。
function Update()
{
var input1 = document.getElementById("id1").value;
var input2 = document.getElementById("id2").value;
var checkbox1 = document.getElementById("id3").checked;
var select1 = document.getElementById("id4").value;
document.getElementById("id5").value=input1;
document.getElementById("id6").value=input2;
document.getElementById("id7").checked=checkbox1;
document.getElementById("id8").value=select1;
}
<div id="block2">
<input type="text" id="id5" class="class1" value="a" onkeyup="Update2()">
<input type="text" id="id6" class="class2" value="b" onkeyup="Update2()">
<input type="checkbox" id="id7" class="class3" onchange="Update2()"> checkbox
<select id="id8" class="class4" onchange="Update2()">
<option value="0">White</option>
<option value="1">Brown</option>
<option value="2">Gray</option>
</select>
</div>
function Update2()
{
var input1 = document.getElementById("id5").value;
var input2 = document.getElementById("id6").value;
var checkbox1 = document.getElementById("id7").checked;
var select1 = document.getElementById("id8").value;
document.getElementById("id1").value=input1;
document.getElementById("id2").value=input2;
document.getElementById("id3").checked=checkbox1;
document.getElementById("id4").value=select1;
}