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 blur处理程序中。

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

jQuery如果hasClass隐藏模糊的元素

2 个答案: