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

我想$(':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()添加到代码的末尾以重新提交。看下面的代码：

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

如何将样式添加到具有某些css类onsubmit的输入的div？

3 个答案: