如何将样式添加到具有一些CSS类Onsubmit的输入的DIV

Question

我无法得到我做错了什么。

如果输入无效，我想将背景添加到父级。

我的意思是 - 如果电子邮件输入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

我猜$(':input')选择器应该为$('input')。

因为:input与任何domelements都不匹配。

Answer 2

在这种情况下，最好使用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');
        }
    })
});​

Answer 3

它，因为当页面提交时，页面将寄回服务器。添加event.preventdefault（）以停止发回，然后将.submit（）添加到代码末尾以重新提交。查看代码bellow：

$('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();
   }
});