只需要在脚本中合并一次动画功能答案

【问题标题】：Need to incorporate animate function only once in script只需要在脚本中合并一次动画功能
【发布时间】：2023-04-03 07:29:01
【问题描述】：

不是为每个输入粘贴 $('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();
        }
    }
});
});

【问题讨论】：

标签： jquery jquery-animate scrolltop

【解决方案1】：

创建一个名为

 doScroll = false;

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

然后进行最后一次验证

if (doScroll)

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

【讨论】：

【解决方案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 存在为条件。

【讨论】：

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

【讨论】：