在我的表单中,我向所有不能为空的元素添加了一个名为 required
的类。然后,我使用 $.each()
循环遍历每个元素,并添加一个名为 border
的类,该类将为所有这些元素应用 2px 红色边框。
var req = $('.required');
$.each(req, function(){
var curr_val = $(this).val();
if(! curr_val)
{
$(this).addClass('border');
}
});
现在页面上有垂直滚动,因此当单击“提交”时,我希望页面向上滚动到第一个空元素,以便用户知道出了问题,这就是表单未提交的原因
我尝试过的
我在早期版本的代码中添加了此 block
$.each(req, function(){
var curr_val = $(this).val();
if(! curr_val)
{
$(this).addClass('border');
$('html, body').animate({ // added for scrolling purposes
scrollTop: $(this).offset().top
}, 200);
}
});
这可行,但问题是它将以每 0.2 秒的间隔不断滚动,直到到达最后一个空元素。对于用户来说,这看起来非常有趣且不受欢迎。
所以我想知道是否有办法让它滚动到第一个空元素并停在那里,即使它下面有更多的空元素。当该元素填满并再次单击“提交”时,再次滚动到第一个空元素并将其停在那里。
JS fiddle
这是一个 JS Fiddle,可以帮助您入门,也可以让您了解我所指的有趣行为。请注意它如何不断滚动直到到达最后一个元素。
最佳答案
每当遇到任何空字段时,您都可以通过返回 false 来突破 $.each 。类似这样的
$("#submit").on('click',function(){
var req = $('.required');
$.each(req, function(e){
var curr_val = $(this).val();
if(! curr_val)
{
$(this).addClass('border');
$('html, body').animate({ // added for scrolling purposes
scrollTop: $(this).offset().top
}, 200);
return false;
}
});
});
希望这有帮助..
关于jquery - 向所有必需元素添加边框,但顶部滚动到第一个空元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13855588/