Question

我正在创建一个表单，如果输入为空，则在输入失去焦点时会出现错误消息。我还想在输入中添加一个类，使其具有红色边框。

当我添加$(this).addClass("error");时出现问题-错误消息不再显示。使用addClass()是否会更改函数中this的引用？有人可以向我解释发生了什么吗？我通常对jQuery非常满意，但在这里我有点迷茫。

这是我的代码：

$(function() {
  $.fn.showError = function(error) {
    $(this).addClass("error");
    $errorElement = this.closest(".input-field").find(".error");
    if (!$errorElement.length) {
      $errorElement = $('<span class="error"></span>').appendTo(this.closest(".input-field"));
    }
    $errorElement.text(this.data("errormsg"));
  };

  $("input").on("focusout", function(e) {
    $(this).showError();
  });
});

.error {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<div class="input-field">
  <input type="text" data-errormsg="Please enter your first name" />
</div>

Answer 1

$errorElement = this.closest(".input-field").find(".error");

由于您刚刚将error添加到了输入中，因此此行查找输入并将文本添加到其中，但是由于input元素没有子元素，因此不会显示该文本。使用

$errorElement = this.closest(".input-field").find("span.error");

使用jQuery $（this）.addClass（）会破坏工作代码

1 个答案: