jquery - 如何向具有某些 css 类 onsubmit 输入的 div 添加样式？

Question

我无法理解我做错了什么。

如果输入无效，我想为父 div 添加背景。

我的意思是 - 如果电子邮件输入 hasClass 错误，则将背景添加到 field2。

这是我的js代码：

 $('.login').submit(function() {

 $(':input').each(function() {

 if ($(this).hasClass('valid')) {

 $(".field2").has($(this)).removeClass('bg2').addClass('bg1');
  }
 if ($(this).hasClass('error')) {

 $(".field2").has($(this)).removeClass('bg1').addClass('bg2');

  }
 })

});

我有工作代码：

 $('input').each(function() {

  if ($(this).hasClass('valid')) {

 $(".field2").has(this).removeClass('bg2').addClass('bg1');
  }
 if ($(this).hasClass('error')) {

 $(".field2").has(this).removeClass('bg1').addClass('bg2');

 }
 })
}
window.setInterval(foo3, 1);

但是为什么以前的变体不起作用？

和 HTML：

   <div class="field2">
  <label for="user_email" id="em">E-mail Adress</label>

    <input id="user_email" name="user[email]" size="30" type="email" value="" class="error">
  </div>

我的 jQuery 出了点问题 - 有人可以建议什么吗？

Answer 1

这是因为当页面提交时，页面将回发到服务器。添加event.preventDefault()以停止回发并将.submit()添加到代码末尾以重新提交。看下面的代码：

$('input[type="submit"]').click(function(e) {
   e.preventDefault();

   $(':input').each(function() {
      if ($(this).hasClass('valid')) {
      $(".field2").has($(this)).removeClass('bg2').addClass('bg1');
      }
      if ($(this).hasClass('error')) {
      $(".field2").has($(this)).removeClass('bg1').addClass('bg2');
      }
   })

   if ($('input[class="error"]').length == 0) {
      $('.login').submit();
   }
});

Answer 2

我想$(':input')选择器应该是$('input')。

因为:input不匹配任何 DOMElements。

Answer 3

closest()在这种情况下你最好使用：

$('.login').submit(function() {
    $(':input').each(function() {
        if ($(this).hasClass('valid')) {
            $(this).closest('.field2').removeClass('bg2').addClass('bg1');
        }

        if ($(this).hasClass('error')) {
            $(this).closest('.field2').removeClass('bg1').addClass('bg2');
        }
    })
});​