1

有两个 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 字符串“复制”这些值？

4

5 回答 5

3

为所有元素创建一个通用更改处理程序：

向主要元素添加一个类：

<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/

于 2013-01-26T16:59:24.747 回答
1

文本框值可以通过使用以下内容进行概括：

$(function() {
            $(".class1").live('keypress', function() {
                $(".class3").val($(this).val());
            });
            $(".class2").live('keypress', function() {
                $(".class4").val($(this).val());
            });

        });

FIDDLE用于从第一个和第二个复制值

于 2013-01-26T16:51:05.170 回答
1

我想说可以使用单行复制策略，但只能用于单一类型的输入标签。问题是不同输入标签的“值”必须以不同的方式处理。因此，要么您需要复制策略中的条件（回调或切换），要么您需要不同的复制处理程序。

我会选择后者，因为您可以使用 jquery 选择器轻松识别不同类型的输入标签。

于 2013-01-26T16:11:07.750 回答
1

这将正常工作。这里的第一行只是清除现有的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)指定事件处理程序也应该被复制

于 2013-01-26T16:15:14.300 回答
0

让我们把它变成动态的。

对于<input type="text" />信息将被传输onkeyup，意味着您输入它的那一刻。

For <input type="checkbox" />information will be transfer 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;
}
于 2013-01-26T16:19:48.023 回答