如何添加样式到具有一些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 - 可以someon有什么建议？

Answer 1

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

因为:input与任何DOME元素不匹配。

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