Рефакторинг небольшого jquery-кода

203

20 октября 2017, 14:04

Имеется небольшой индусский скрипт моего авторства, который добавляет и убирает классы по клику на элемент. Помогите сделать код нормальным, с перебором элементов из цикла, а не тупым дублированием кусков. Не очень дружу с перебором массива элементов, поэтому особая благодарность за напишите код с пояснениями.

Вот скрипт:

(function($) {
            var searchButton = $('.new_os .new_f-form-submit');
            var extSearchButton = $('.new_os .new_f-dropdown-btn-apply');
            var orderButton = $('.new_os .new_t-order-btn');
            searchButton.on('click', function(){
                $(this).addClass('hvr-ripple-out').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd', function () {
                    $(this).removeClass('hvr-ripple-out');
                });
            });
            extSearchButton.on('click', function(){
                $(this).addClass('hvr-ripple-out').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd', function () {
                    $(this).removeClass('hvr-ripple-out');
                });
            });
            orderButton.on('click', function(){
                $(this).addClass('hvr-ripple-out').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd', function () {
                    $(this).removeClass('hvr-ripple-out');
                });
            });
        })(jQuery);

Заранее спасибо!

Answer 1

Раз они работают одинаково, почему бы им не выделить один общий класс, к примеру btn-special, тогда получаем код:

$(function() {
     var $btn = $(".new_os .new_f-form-submit, .new_os .new_f-dropdown-btn-apply, .new_os .new_t-order-btn"), // лучше jQuery объектам давать имена с знаком $
         btnClikedClassName = "hvr-ripple-out"; // вдруг решите сменить название класса, чтобы в одном месте все было
     $btn.on("click", function() { // один обработчик для всех кнопок с классом btn-special
         $(this).addClass(btnClikedClassName).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd', function () {
              $(this).removeClass(btnClikedClassName);
         });
     })
})