Question

不是为每个输入粘贴 $（'html，body'）。animate（{scrollTop：0}，2500）; ，而是只能编写一次以适用于所有输入？< / p>

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

感谢。

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

Answer 1

创建一个名为

的var

 doScroll = false;

在每种情况下你需要它设置一个像doScroll = true

的var

然后进行最后一次验证

if (doScroll)

$('html, body').animate({ scrollTop: 0 }, 2500);

Answer 2

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

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

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

Answer 3

我没办法测试这个，因为我没有你的标记或任何东西..但我认为你可以通过做类似下面的事情来减少你使用的代码。

$(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中的数字并不是一个好的做法）。然后它选择相关的元素并做它需要做的事情，尽管我认为可以通过根据它们与文档中的错误输入相关的位置选择它们来改进它们。毕竟，如果其中任何一个出现错误，它会设置一个标志，然后执行动画。

需要在脚本中仅包含一次动画功能

3 个答案: