jQuery if hasClass隐藏元素模糊

Question

当用户未在表单字段中输入有效数据时，我有一个表单会在HTML标签中显示错误消息。 标签显示在表单字段onBlur下方，并停留在该位置，直到将数据输入到表单字段中为止。 我希望仅在用户单击回表单字段时显示标签，而不是持续显示。 下面是当用户从表单字段中跳出时我试图隐藏错误标签的脚本。 我想，一旦我可以有效地隐藏它，我担心会再次出现它。

这是HTML：

  <div class="field">
     <input type="text" name="firstname" id="firstname" class="error has-error">
     <label for="firstname" class="error">First Name is required.</label>
  </div>

和脚本

<script type="text/javascript">
    if($('.fieldset #firstname').hasClass('error')) {
    $(this).blur($('.field label')).hide();
     }
</script>

Answer 1

您需要将一个函数作为回调传递给.blur（）函数，如下所示：

$(".fieldset #firstname").blur(function(evt) {
    if($(this).hasClass('error')) {
        $(".field label", $(this).parent()).hide();
    }
});

请注意，我正在$（this）的parent（）上下文中执行.field标签选择器。 $（this）将引用#firstname，因此，如果您获得了父节点，则可以轻松地在该节点树中进行选择，而不会在页面中意外获得其他.field标签。

Answer 2

您需要将if条件放入on模糊处理程序中。

$('.fieldset #firstname').blur(function(){
    if ($(this).hasClass('error')){
        $('.field label')).hide();
    }
})