Я создал галерею портфолио и хочу добавить несколько кнопок, чтобы пользователь мог отфильтровать галерею. Кнопка "Все" работает нормально, а остальные 3 кнопки - нет. Я не могу найти проблему в моем коде.
HTML
<div id = "portfolio">
<div id = "portfolio-sort">
<a href = "#" id = "all">ALL</a>
<a href = "#" data-cat = "a">A</a>
<a href = "#" data-cat = "b">B</a>
<a href = "#" data-cat = "c">C</a>
</div>
<div id = "portfolio-content">
<div class = "portfolio-item" data-cat = "a">A</div>
<div class = "portfolio-item" data-cat = "b">B</div>
<div class = "portfolio-item" data-cat = "c">C</div>
<div class = "portfolio-item" data-cat = "c">C</div>
<div class = "portfolio-item" data-cat = "b">B</div>
<div class = "portfolio-item" data-cat = "a">A</div>
<div class = "portfolio-item" data-cat = "a">A</div>
<div class = "portfolio-item" data-cat = "c">C</div>
<div class = "portfolio-item" data-cat = "b">B</div>
</div>
</div>
JS
var Portfolio = {
sort: function (items) {
Portfolio.hideAll($('#portfolio-content *'));
Portfolio.showAll(items);
},
showAll: function (items) {
items.fadeIn(700);
},
hideAll: function (items) {
items.hide();
},
doSort: function () {
$('a', '#portfolio-sort').on('click', function () {
var $a = $(this);
if (!$a.is('#all')) {
var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');
Portfolio.sort(items);
} else {
var items = $('#portfolio-content *');
Portfolio.hideAll(items);
Portfolio.showAll(items);
}
});
}
};
Portfolio.doSort();
Предполагается, что функция фильтрует нажатие кнопки, я хотел бы иметь 3 разных значения и одно значение «все», которое будет возвращать все изображения.
Пожалуйста помоги! :)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Эй, ваш код работает правильно, какую версию jQuery вы используете? У меня работало с версией 3.1.0. Может быть, опубликуйте ссылку на jsbin/codepen, и я посмотрю.
Как уже было сказано, ваш код работает просто отлично. См. фрагмент ниже, работающий с версией 2.2.4.
var Portfolio = {
sort: function (items) {
Portfolio.hideAll($('#portfolio-content *'));
Portfolio.showAll(items);
},
showAll: function (items) {
items.fadeIn(700);
},
hideAll: function (items) {
items.hide();
},
doSort: function () {
$('a', '#portfolio-sort').on('click', function () {
var $a = $(this);
if (!$a.is('#all')) {
var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');
Portfolio.sort(items);
} else {
var items = $('#portfolio-content *');
Portfolio.hideAll(items);
Portfolio.showAll(items);
}
});
}
};
Portfolio.doSort();<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id = "portfolio">
<div id = "portfolio-sort">
<a href = "#" id = "all">ALL</a>
<a href = "#" data-cat = "a">A</a>
<a href = "#" data-cat = "b">B</a>
<a href = "#" data-cat = "c">C</a>
</div>
<div id = "portfolio-content">
<div class = "portfolio-item" data-cat = "a">A</div>
<div class = "portfolio-item" data-cat = "b">B</div>
<div class = "portfolio-item" data-cat = "c">C</div>
<div class = "portfolio-item" data-cat = "c">C</div>
<div class = "portfolio-item" data-cat = "b">B</div>
<div class = "portfolio-item" data-cat = "a">A</div>
<div class = "portfolio-item" data-cat = "a">A</div>
<div class = "portfolio-item" data-cat = "c">C</div>
<div class = "portfolio-item" data-cat = "b">B</div>
</div>
</div>
Проблема с вашим обновленным кодом заключается в том, что в этой строке:
Portfolio.hideAll($('#portfolio-content *'));Он выбирает ВСЕ элементы и, следовательно, также скрывает теги изображений. Просто измените это, чтобы быть более конкретным:Portfolio.hideAll($('#portfolio-content > div'));Это выберет непосредственные дочерние элементы #portfolio-content, которые являются элементами div.