Попытка реструктурировать JQuery для лучшей практики, но не удается при объявлении переменной

Question

Основываясь на аналогичном изучении ситуации, я создал следующий фрагмент сценария, чтобы показать / скрыть форму регистрации при нажатии на изображение «регистрации» (с символом «X», который появляется и действует как кнопка закрытия, когда форма показывает :

(function($) {

    var container = $('#sidecontent'); 

    $('#signup').on('click', function () { 

        container.slideToggle(500); 

        if ( container.find('span.close').length ) return; 

        $('<span class=close>X</span>') 
            .prependTo(container) 
            .on('click', function () {
                container.slideToggle(500)
            })
    });

})(jQuery);

Кажется, работает нормально. Моя проблема в том, что я думаю, что это, вероятно, не лучший способ написать это ... но как только я пытаюсь привести в порядок код, то есть сделать var Mytoggle = $(container.slideToggle(500)), чтобы я вспоминал, что что-то не получается, или форма появляется автоматически.

Я новичок в Jquery (и, похоже, столкнулся с проблемами при определении переменных и литералов объектов). Буду признателен за любой вклад в лучший способ реструктурировать выше. Спасибо.

Answer 1

Это будет работать:

(function($) {
    var container = $('#sidecontent'),
        Mytoggle = function () {
            container.slideToggle(500);
        }


    $('#signup').on( 'click', function () { 
        Mytoggle();
        if ( container.find('span.close').length ) return; 

        $('<span class=close>X</span>') 
            .prependTo(container) 
            .on('click', function () {
                Mytoggle();
            })
    });
})(jQuery);

Функция Mytoggle определена вне обработчика нажатия.

Приведенный выше код может быть улучшен дополнительно:

(function($) {
    var container = $('#sidecontent'),
        Mytoggle = function () {
            container.slideToggle(500);
        }

    // You can define this click handler here, even if span.close doesn't exist yet
    container.on('click', 'span.close', Mytoggle);


    $('#signup').on('click', function () { 
        Mytoggle();

        if (container.find('span.close').length === 0) {
            $('<span class="close">X</span>') 
            .prependTo(container);
        } 


    });
})(jQuery);

Answer 2

Вероятно, должно быть

var myToggle = $(container).slideToggle(500);

edit - wait;Вы хотите, чтобы это была функция, верно?

function myToggle() {
  container.slideToggle(500);
}

Тогда вы можете просто вызвать это или передать его для настройки обработчика щелчков:

   // ...
   .on('click', myToggle);

отредактируйте снова - Поскольку вы инициализируете «контейнер» как переменную jQuery, нет смысла переупаковывать его, поэтому вы можете просто напрямую использовать «контейнер» для выполнения вызовов jQuery.

Иногда люди используютимена переменных с «$» в начале в качестве напоминания:

var $container = $('#sidecontent');

Это вопрос личных предпочтений.