Question

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>

在我的应用程序中，有六个字段具有相同的类名来验证space。我通过隐藏的div显示错误消息，该div也具有相同的类。这些div位于表的<td>标记内

我的问题是，如果我按空格键，它显示错误消息，但它显示在所有div中。我想显示空格键按下哪个输入字段的错误消息。如何执行此操作。

Answer 1

使用.closest仅显示壁橱div。

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

Answer 2

试试这个：

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

请参阅文档jQuery.siblings()

Answer 3

为每个元素设置ID，因为ID用于标识页面上的唯一元素：

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

然后：

$("#nameField").text("No space please");

Answer 4

使用

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();
     }
 });

在所有div中显示错误消息

4 个答案: