Использование jQuery $ (this) .addClass () нарушает рабочий код

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 к входу, эта строка находит вход и добавляет к нему текст, однако, поскольку элемент ввода не имеет дочерних элементов, текст не отображается. Используйте

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