Question

假设我有这套HTML标记和CSS

#CSS

.inputhelp_text { background: #000; color: #fff; }
.nodisplay { display: none; }

<input class="inputhelp" id="firstname" /><span class="inputhelp_text nodisplay" id="help_firstname">Write in your firstname</span>

<input class="inputhelp" id="lastname" /><span class="inputhelp_text nodisplay" id="help_lastname">Write in your lastname</span>

使用jQuery，我需要将一个函数绑定到所有输入字段（我想使用jQuery的EACH函数），这样当我单击输入字段时，它应该将每个span的类切换为“inputhelp_text”。我已经让它在每个字段的两个独立函数中工作，但由于我有很多字段，我知道有更好的方法来解决它。

有什么建议吗？

Answer 1

您希望将处理程序绑定到blur()和focus()事件：

$(".inputhelp").focus(function() {
  $("span.inputhelp_text:visible").addClass("nodisplay");
  $(this).next("span.inputhelp_text").removeClass("nodisplay");
}).blur(function() {
  $("span.inputhelp_text").addClass("nodisplay");
});

通常我建议使用像hide()和show()这样的jQuery效果，但这些只能用于块级元素。 <span>是内联的，所以这不起作用。

Answer 2

您可以使用每个功能：

$("input").each(function() {
  // this points to the input DOM element
  // $(this) is the jQuery wrapped element
});

例如，您可以：

$(this).removeClass("inputhelp");
$(this).addClass("inputhelp_text");

在回调中。

Answer 3

我在这种情况下做的是以下内容。我们假设您有一组$("input")以某种方式绑定到它们，例如，当它们为空时，您希望添加一个.invalid类：

$("input").each(function () {
      var $this = $(this);
      $this.focus(function (e) {
        $this.removeClass("invalid");
      });

      $this.blur(function (e) {
        if ($this.val() == "") {
          $this.addClass("invalid");
        }
      });
    });

通过存储从$(this)返回的$.fn.each的引用，您现在可以单独绑定到每个元素上的事件。

如何使用jQuery将函数绑定到所有输入元素？

3 个答案: