Блог

Итак, у меня есть функция щелчка jquery, назначенная переключателю включения / выключения. Очень простой скрипт:

 $('.on-off').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.find('.slider').toggleClass('active');
});
  

У нас есть две версии этого переключателя. Один из них мгновенно переключается при нажатии, а затем мы отправляем значение при нажатии next (он же submit).

Наш другой вызывает ajax-функцию jquery, которая переключается на успех и после успеха, если это определенный код сообщения, который определен на серверной части.

 jQuery.ajax({
                url: url,
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {'requestType': requestType},
                success: function(message) {
                    if(message.STATUS=='2000'){
                        if(currentButtonClicked=='dashboardChargingButton'){
                            if($('#dashboardChargingButton').html()==startCharge)
                                $('#dashboardChargingButton').html(stopCharge);
                            else
                                $('#dashboardChargingButton').html(startCharge);
                         }
                        if(currentButtonClicked=='invokeChargingButton'){
                            $( "#invokeChargingButton .slider" ).toggleClass( 'active');
                        }
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.status   " - "   xhr.statusText);
                }
            });
     }
  

Как вы можете видеть, я должен снова переключить класс, используя тот же код, но с прямым таргетингом.

Переключатели включения выключения этого типа имеют onclick внутри фактического html, вызывающего функцию, которая обрабатывает этот ajax.

Моя цель — создать мой первый набор кода, который нацелен на элемент и переключает класс на выполнение всего этого, но динамически, чтобы нам не приходилось каждый раз вызывать функцию.

Концептуально я думал, что:

 $('.on-off').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    if (!$this.attr('onclick')) {
        $this.find('.slider').toggleClass('active');
    } else {
        var clickFunction = $this.attr('onclick');
        call the clickFunction
        if (clickfunction = true) {
            $this.find('.slider').toggleClass('active');
        }
    }
});
  

Что это сделало бы, так это захватить onclick, но не вызывать его, пока я не укажу. И внутри ajax-запроса вместо переключения я бы просто вернул true.

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

Вот ссылка на базовую скрипку включения / выключения.

Скрипка

Надеюсь, я объяснил все достаточно подробно.