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

JQuery: попытка #2. Как реализовать функцию?

Есть код:
var buttonAll = $('.works-button')[0],
    buttonWeb = $('.works-button')[1],
    buttonGraphic = $('.works-button')[2],
    buttonArt = $('.works-button')[3],
    worksWeb = $('.category-web'),
    worksGraphic = $('.category-graphic'),
    worksArt = $('.category-art'),
    worksAll = $('.work-image-link');
 
$(document).ready(function(){
    $(buttonAll).on('click', function(){
        worksAll.show('fast', function(){
            worksAll.appendTo('.works-flow');
        });
    });
 
    $(buttonWeb).on('click', function(){
        worksAll.hide('fast');
        worksWeb.show('fast', function(){
            worksWeb.appendTo('.works-flow');
        });
    });
 
    $(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');
        });
    });
 
});


Хочу отрефакторить его так, чтобы:
// Хочу, чтобы такой фрагмент:
 
// $(buttonWeb).on('click', function(){
//     worksAll.hide('fast');
//     worksWeb.show('fast', function(){
//         worksWeb.appendTo('.works-flow');
//     });
// });
 
// можно было заменить на: 
// $(buttonWeb).on('click', showOnly(worksWeb));

Помогите написать функцию, эта не работает:
showOnly = function(cat){
      $(this).addClass('active');
        worksAll.hide();
        cat.show('fast', function(){
            cat.appendTo('.works-flow');
        });
    };
  • Вопрос задан
  • 2327 просмотров
Решения вопроса 2
@Quilin
Full-stack разработчик
Попробуйте

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


А еще поузнавайте про делегаты в JavaScript.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Функции могут возвращать функции

function (worksWeb) {
    return function () {
        // magic     
        // эту функцию будет дергать jQuery по клику.
    }
}


Это называется каррирование. Если развернуть получится так:
var buttonWebClickHandler = showOnly(worksWeb);
$(buttonWeb).on('click', buttonWebClickHandler);
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@asdz
было бы легче если вы оформили задачу на codepen.
Ответ написан
Ваш ответ на вопрос

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

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