1

$（'html、body'）。animate（{scrollTop：0}、2500）;を貼り付ける代わりに すべての入力に対して、すべての入力で機能するように1回だけ書き込むことはできますか？

何が起こっているのかというと、スクリプト内のすべてのイベントで画面が一番上までスクロールしていて、下にスクロールできなくなっています。

ありがとう。

$(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 に答える