vicodin
@vicodin
Имею некоторый опыт

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

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

Есть такой фрагмент кода:
$(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));

Спасайте, голова уже не варит, да и не сталкивался я с таким еще.
Скрин - для чего я это пишу:
4ac0b25d36.png
  • Вопрос задан
  • 3165 просмотров
Пригласить эксперта
Ответы на вопрос 5
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
Потому что это только селектор, а не объект судя по коду.
Ответ написан
@olekhy
var buttonWeb; // u selector

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

$(buttonWeb).on('click', showOnly);
Ответ написан
AMar4enko
@AMar4enko
А что конкретно вы от последнего куска кода ожидаете? Давайте разберем, как он будет выполняться:
- ! Вычислить значение функции 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. Посмотрел ваш код.
Ответ написан
@timokins
А почему бы не воспользоваться data атрибутами?
К кнопкам и к изображением добавить свои data по категориям,
и по клику на кнопку считывать ее атрибут и по этому атрибуту показать принадлежащие к нему изображения.
Ответ написан
@manuylov
Не всех знаю деталей, но возможно это поможет
showOnly = function(cat){
        return function(){
            worksAll.hide();
            cat.show('fast', function(){
                cat.appendTo('.works-flow');
            });
        }
    };
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы