JQuery: почему я не могу передать jquery объект в функцию?

Question

[Anton Filippov]

Добрый вечер!
Подскажите, видимо, я что-то упускаю уже битый час.

Есть такой фрагмент кода:

$(buttonGraphic).on('click', function(){
        worksAll.hide('fast');
        worksGraphic.show('fast', function(){
            worksGraphic.appendTo('.works-flow');
        });
    });

    $(buttonArt).on('click', function(){
        worksAll.hide('fast');
        worksArt.show('fast', function(){
            worksArt.appendTo('.works-flow');
        });
    });

Как видно, тут нужно применить правило DRY и вынести повторяющийся функционал, в отдельную функцию, что я и сделал. Но когда я выношу - не работает. Ниже код функции и её вызова.

showOnly = function(cat){
        worksAll.hide();
        cat.show('fast', function(){
            cat.appendTo('.works-flow');
        });
    };

    $(buttonWeb).on('click', showOnly(buttonWeb));

Спасайте, голова уже не варит, да и не сталкивался я с таким еще.
Скрин - для чего я это пишу:

Answer 1

[Александр Аксентьев]

Потому что это только селектор, а не объект судя по коду.

Comments

[Anton Filippov]

и из этого следует, что ... мне не нужно записывать worksGraphic = $('.category-graphic'), в переменную, а прямо так и использовать?

[Александр Аксентьев]

Антон: я не знаю о каком worksGraphic вы говорите. Ошибка в buttonWeb. Посмотрите сами buttonWeb селектор, вы его передаете в функцию, а используете как объект, при этом в той же строчке вы его используете как надо т.е. $(buttonWeb). А вообще да лучше использовать напрямую, читабельнее код будет и понятнее.

[Александр Аксентьев]

Если бы вы название переменной и название аргумента сделали одинаковым, то сразу бы заметили косяк

[akarin]

проверьте typeof

[Anton Filippov]

Александр Аксентьев: pastebin.com/ZVQGqEiY вот весь код скрипта, и внизу коммент, как я хочу, чтобы было)
сейчас попробую напрямую, но, думаю, это ухудшит читабельность кода

[Anton Filippov]

Дополнение:
Если я просто в консоли вызываю showOnly(worksWeb); - всё работает, как надо

Answer 2

[olekhy]

var buttonWeb; // u selector

showOnly = function(){
worksAll.hide();
buttonWeb.show('fast', function(){
buttonWeb.appendTo('.works-flow');
});
};

$(buttonWeb).on('click', showOnly);

Comments

[Anton Filippov]

это конкретный случай, да еще и для показа кнопки, которая итак никуда не пропадает)
я хочу написать общую функцию

полный код тут: pastebin.com/ZVQGqEiY

Answer 3

[_ _]

А что конкретно вы от последнего куска кода ожидаете? Давайте разберем, как он будет выполняться:
- ! Вычислить значение функции showOnly для переданного buttonWeb (будет undefined)
- Используя значение buttonWeb как dom-селектор, выбрать все элементы, ему удовлетворяющие
- ! Для каждого из полученных элементов добавить подписку на событие click, с функцией-обработчиком, которая была вычислена как результат выполнения функции showOnly (а она у нас undefined)

Вам в on('click' нужно передать значение типа "функция", а вы передаете undefined.
Добиться желаемого поведения можно как-то так (исправил):

showOnly = function(showSelector, hideSelector){
    return function(){  
        var cat = $(selector);        
        $(hideSelector).hide();
        cat.show('fast', function(){
            cat.appendTo('.works-flow');
        });
    };    
};

$(buttonWeb).on('click', showOnly('.category-web', '.work-image-link'));

В результате выполнения showOnly мы получаем новую функцию, привязанную к переданным в showOnly селекторам, которую используем в качестве обработчика.
P.S. Посмотрел ваш код.

Comments

[Anton Filippov]

начинает пропадать и появляться кнопка, а не содержимое воркс-флоу.
Весь код можно посмотреть тут: pastebin.com/ZVQGqEiY

[Anton Filippov]

Мне нужно, чтобы не buttonWeb скрывался по клику на него же, а worksWeb скрывался по клику на buttonWeb

Answer 4

[timokins]

А почему бы не воспользоваться data атрибутами?
К кнопкам и к изображением добавить свои data по категориям,
и по клику на кнопку считывать ее атрибут и по этому атрибуту показать принадлежащие к нему изображения.

Comments

[Anton Filippov]

Спасибо за ответ,
я просто очень отдалённо с ними знаком.
+ мне кажется разница не изменится, считывать класс или атрибут, класс это же тоже атрибут %)

[timokins]

Антон:
Набросал пример на скорую руку:
jsfiddle.net/rxun9gre

[Anton Filippov]

timokins: хорошее альтернативное решение !

[Anton Filippov]

но мне все таки хочется разобраться со своей функцией, не пойму почему она не работает, она же очень простая.
возможно я запутался, и не понимаю чем отличается worksWeb от $(worksWeb)

[_ _]

Антон: Когда вы делаете так $('.works-button'), вы создаете jQuery-обертку для селектора.
Когда вы делаете так worksWeb = $('.works-button')[1], вы сохраняете в переменную ссылку на второй DOM-элемент, который удовлетворяет селектору.
Когда после этого вы делаете $(worksWeb) вы создаете jQuery-обертку для DOM-элемента.

[Anton Filippov]

Александр Марченко: а чем отличается jQuery обертка DOM-элемента от обертки селектора?

Answer 5

[manuylov]

Не всех знаю деталей, но возможно это поможет

showOnly = function(cat){
        return function(){
            worksAll.hide();
            cat.show('fast', function(){
                cat.appendTo('.works-flow');
            });
        }
    };

Comments

[Anton Filippov]

Да, как то так и помогло уже, я второй раз вопрос задавал.
Тем не менее спасибо :)