Нужно включить функцию анимации только один раз в сценарий

Question

Вместо вставки $ ('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(); 
     } 
    } 
}); 
}); 

Answer 1

Theres никоим образом для меня, чтобы проверить это, поскольку у меня нет вашей разметки или чего-то еще .. но я думаю, что вы действительно можете уменьшить код вы используете что-то вроде следующего.

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

В основном он проверяет все входы и проверяет, если они имеют класс ошибок, если это так захватывает номер (так как вы ссылаетесь номер в идентификаторе не очень хорошая практика, кстати). Затем он выбирает связанные элементы и делает то, что ему нужно делать, хотя я думаю, что это можно было бы улучшить, выбрав их на основе их позиции, связанной с ошибочным входом в документе. После всего этого, если в любом из них была ошибка, он устанавливает флаг и выполняет анимацию.

Answer 2

создать вар называется

doScroll = false; 

в каждой конкретной ситуации вам нужно это установить вар как doScroll = истина

Затем сделать в последнюю Validation

if (doScroll) 

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

Answer 3

Вы должны быть в состоянии использовать 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 есть.