1

IDが異なる2つのdivがありますが、構造はまったく同じです。

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

1ページに。

両方のブロックをまったく同じように見せたいです。したがって、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を使用してそれを行う最短の方法は何ですか？1つの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

単一行のコピー戦略を使用することは可能だと思いますが、それは単一タイプの入力タグに対してのみです。問題は、異なる入力タグの「値」を異なる方法で処理する必要があることです。したがって、コピー戦略内に条件付き（コールバックまたはスイッチ）が必要であるか、別のコピーハンドラーが必要です。

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 に答える
1

テキストボックスの値は、次のようなものを使用して一般化できます。

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

        });

1番目と2番目から値をコピーするためのFIDDLE

于 2013-01-26T16:51:05.170 に答える
0

これを動的にしましょう。

<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;
}
于 2013-01-26T16:19:48.023 に答える