1

而不是粘贴$('html, body').animate({ scrollTop: 0}, 2500); 对于每个输入，我可以只写一次以适用于所有输入吗？

发生的事情是我的屏幕滚动到脚本中每个事件的前几个，我不能再向下滚动了。

谢谢。

$(function () {
$('#rbSubmit').formValidator({
    scope: '#form_register',
    onError: function () {
        if ($('#input_2     input').hasClass('error-input')) {
            $('#r2 div, #r2 input').css('background-color', '#C1272D').css('color', '#FFF');
            $("#error-div").show();
            $('html, body').animate({
                scrollTop: 0
            }, 2500);
        } else {
            $('#r2 div').css('background-color', '#2F2F2F');
            $("#error-div").hide();
        }
        if ($('#input_3     input').hasClass('error-input')) {
            $('#r3 div, #r3 input').css('background-color', '#C1272D').css('color', '#FFF');
            $("#error-div").show();
            $('html, body').animate({
                scrollTop: 0
            }, 2500);
        } else {
            $('#r3 div').css('background-color', '#2F2F2F');
            $("#error-div").hide();
        }
        if ($('#input_7     input').hasClass('error-input')) {
            $('#r7  div,#r7 input').css('background-color', '#C1272D').css('color', '#FFF');
            $("#error-div").show();
            $('html, body').animate({
                scrollTop: 0
            }, 2500);
        } else {
            $('#r7 div').css('background-color', '#2F2F2F');
            $("#error-div").hide();
        }
        if ($('#input_10 textarea').hasClass('error-input')) {
            $('#r10 div').css('background-color', '#C1272D').css('color', '#FFF');
            $("#error-div").show();
            $('html, body').animate({
                scrollTop: 0
            }, 2500);
        } else {
            $('#r10 div').css('background-color', '#2F2F2F');
            $("#error-div").hide();
        }
    }
});
});
4

3 回答 3

1

创建一个名为

 doScroll = false;

在每种情况下，您都需要它设置一个类似于 doScroll = true 的变量

然后进行最后一次验证

if (doScroll)

$('html, body').animate({ scrollTop: 0 }, 2500);
于 2012-04-18T19:27:14.753 回答
1

您应该能够利用 jQuery 选择器和遍历而不是多个函数调用：

onError: function(){
    $('.error-input').parents().find('html, body').animate({
        scrollTop: 0
    }, 2500);
    $('.error-input').parents().find('#error-div').show();
}

通过基于 jQuery 调用$('.error-input')并返回到 DOM 根（HTML 标记），调用将以.error-input存在为条件。

于 2012-04-18T19:30:43.990 回答
0

我没有办法对此进行测试，因为我没有您的标记或任何东西.. 但我认为您可以通过执行以下操作来真正减少您使用的代码。

$(function () {
    $('#rbSubmit').formValidator({
        scope: '#form_register',
        onError: function () {
            var isError = false;
            $('#form_register input').each(function(){
                var inputNum = $(this).id.split('_')[1];

                if($(this).hasClass('error-input')){
                     isError = true;

                     $('#r' + inputNum +' div, #r' + inputNum +' input').css('background-color', '#C1272D').css('color', '#FFF');
                     $("#error-div").show();
                }else{
                     $('#r'+ inputNum + ' div').css('background-color', '#2F2F2F');
                }
            });

            if(isError){
                $('html, body').animate({
                    scrollTop: 0
                }, 2500);
            } else {
               $("#error-div").hide();
            }
        }
    });
});

​基本上，它会检查所有输入并检查它们是否有错误类，如果有，则获取数字（因为顺便说一下，您在 id 中引用数字并不是一个好习惯）。然后它选择相关元素并执行它需要做的事情，尽管我认为这可以通过根据与文档中错误输入相关的位置来选择它们来改进。毕竟，如果其中任何一个出现错误，它会设置一个标志，并执行动画。

于 2012-04-18T19:28:54.513 回答