0

js:

var KEYS = {
    SPACE: 32
};
$(".trim-space").keyup(function (e) {
    var $this = $(this);
    $this.val($.trim($this.val()));
    if (e.keyCode == KEYS.SPACE) {
        $(".errorlist").show();
        $(".errorlist").text("No space please");
    }
});

私のhtml：

<tr>
    <td>Daytime phone:</td>
    <td>
        <input type="text" class="trim-space" name="phone_daytime" />
        <div style="display:none" class="errorlist">No space please</div>
    </td>
</tr>
<tr>
    <td>Mobile phone:</td>
    <td>
        <input type="text" class="trim-space" name="phone_mobile" />
        <div style="display:none" class="errorlist">No space please</div>
    </td>
</tr>

私のアプリケーションでは、スペースを検証するために同じクラス名を持つ 6 つのフィールドがあります。同じクラスを持つ非表示の div を介してエラー メッセージを表示しています。これらの div はテーブルの<td>タグ内にあります。

私の問題は、スペースバーを押すとエラーメッセージが表示されますが、すべてのdivに表示されます。スペースバーが押された入力フィールドのエラーメッセージを表示したい.これを行う方法.

4

4 に答える 4

1

.closest を使用してクローゼット div のみを表示します。

$this.closest($(".errorlist")).show();
$this.closest($(".errorlist")).text("No space please");
于 2013-09-02T07:43:55.610 に答える
1

これを試して：

$this.siblings(".errorlist").text("No space please").show();

ドキュメントを見るjQuery.siblings()

于 2013-09-02T07:54:12.253 に答える
0

ページ上の一意の要素を識別するための ID として、各要素の ID を設定します。

<div style="display:none" id="nameField" class="errorlist">No space please</div>

その後：

$("#nameField").text("No space please");
于 2013-09-02T07:45:54.597 に答える
0

使用する

var KEYS = { SPACE: 32 };
    $(".trim-space").keyup(function(e) {
       var $this = $(this);
       $this.val($.trim($this.val()));

      if (e.keyCode == KEYS.SPACE) {

          $this.next(".errorlist").text("No space please").show(); 
     }
     else{

          $this.next(".errorlist").hide();
     }
 });
于 2013-09-02T07:53:49.940 に答える