2

機能しているコードがいくつかありますが、多くの重複があります: http://jsfiddle.net/6Wp2j/25/

$('input.apple').on('keyup', function() {
    $("div.apple").html(this.value);
});

$('input.orange').on('keyup', function() {
    $("div.orange").html(this.value);
});

$('input.banana').on('keyup', function() {
    $("div.banana").html(this.value);
});

同じコードをいくつかの異なるフィールドに適用できるように、アイテムをある種の配列に入れる方法があるかどうか疑問に思っていました。

4

3 に答える 3

8

すべての入力をターゲットにするか、ターゲットに共通のクラスを指定して何かを抽出することができます。クラスを使用しましたが、要素に複数のクラスがある場合などはデータ属性の方が簡単です。

$('input').on('keyup', function() {
    $('.'+this.className).html(this.value);
});

フィドル

編集：

上記のように、要素に複数のクラスがある場合は、データ属性を使用します。

<input class="input" data-id="apple" >
<input class="input" data-id="orange" >
<input class="input" data-id="banana" >

JS

$('.input').on('keyup', function() {
    $('.' + $(this).data('id')).html(this.value);
});

フィドル

于 2013-07-10T14:30:17.673 に答える
2

クラス名を使用して実行できます。

$('input').on('keyup', function() {
    $("div." + $(this).attr('class')).html(this.value);
});

関係/リンクをdata-fruit属性に含めることをお勧めします。たとえば、次のようになります。

フィドル

$('input').on('keyup', function() {
    $("div[data-fruit=" + $(this).data('fruit') + "]").html(this.value);
});

クラス名は、関係を定義するのに最適ではありません。デザイナーがあなたのコードを与えられ、スタイリングのために追加のクラスをそこに投げ始めた場合、これはコードを壊します。

于 2013-07-10T14:31:07.370 に答える
1

以下を試してください

$('input').on('keyup', function () {
    var clas = $(this).prop('class');
    $("div." + clas).html(this.value);
});

このJSFiddleをチェックしてください

@Ian のフィドルを確認した後、自分の間違いを理解しました。にクラスを追加すると、input属性全体を取得するため、上記は失敗します。

adeneo が提案したように、HTML5 データ属性を使用してみてください。

私はそれを更新しますfiddle。

于 2013-07-10T14:35:27.547 に答える