Может ли мой код jquery "просмотреть по категориям" быть сокращен или уточнен?

Question

Я пытаюсь обновить свой веб-сайт с фотографиями и использовать jquery, чтобы показать или скрыть "категории" для моего портфолио. Я искал по всему, наконец, придумал это решение здесь:

http://jsfiddle.net/EwNRJ/145/

Работает нормально. Когда вы нажимаете кнопку для категории, она скрывает все остальное и показывает эту категорию. Тем не менее, код слишком грязный или может быть сокращен? Кто-нибудь из вас знает кодекс ниндзя, является ли он законным или может быть уменьшен?

В основном меня интересует, как я прячу другие категории. Для каждой функции я перечисляю все остальные категории одну за другой и "показываю" категорию, на которую вы нажали. Поэтому, если пользователь нажимает "портрет", я сначала показываю класс портрета, а затем скрываю все остальные классы (ландшафтный, персональный и т. Д.) Один за другим. Если я добавлю категорию в будущем, мне придется обновить каждую функцию. Ничего страшного, просто хочу убедиться, что нет лучшего способа и что мой код выглядит хорошо и не вызовет никаких проблем с памятью, поскольку я абсолютно новичок в jquery.

Заранее спасибо и хорошего дня.

PS Если кто-то из настоящих джедаев хочет взглянуть на другую вещь, которая меня немного беспокоит; прямо сейчас каждый div исчезает почти один за другим. Есть ли способ сделать паузу или что-то еще, и они все исчезнут в унисон? Я надеюсь, что в этом есть смысл. Я просто хотел бы (если это вообще возможно), чтобы они оживили вместе, а не быстро разваливались, как домино. ОК, еще раз спасибо!

Answer 1

Попробуй это:

$('button').click(function() {
    $(this).siblings('.post').hide() // or $('.post').hide()
    $('.' + this.id).show(500);
});

$('#showall').click(function() {
    $('.post').show(500);
});

DEMO

Answer 2

Сделай это так http://jsfiddle.net/fedmich/M4G4r/

Положите кнопки внутри переключателей. Поместите элементы в.posts Убедитесь, что карты "портретов" исправлены с помощью "s"

Удачного кодирования:)

$('.toggles button').click(function(){
    var d_id = this.id;
    var obj_cur = $('.posts .' + d_id);

    $('.post').not( obj_cur ).hide(500);
    obj_cur.show(500);
});

Answer 3

Вы должны кэшировать категории, а не пытаться найти их каждый раз.

document.ready(function() {
     var Wedding = $('.wedding');
});

Для второй проблемы вам нужно использовать функцию обратного вызова в качестве параметра. Функция обратного вызова выполняется только после завершения основной функции.

Пример:

 $('div').click(function() {
      $(this).animate({'top': '50px'}, 500, function() {
           //callback - start
           $(this).text('a');
           //callback-end
     });
});