Почему моя галерея портфолио фильтрует неправильно?

Я создал галерею портфолио и хочу добавить несколько кнопок, чтобы пользователь мог отфильтровать галерею. Кнопка "Все" работает нормально, а остальные 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 разных значения и одно значение «все», которое будет возвращать все изображения.

Пожалуйста помоги! :)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
126
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Эй, ваш код работает правильно, какую версию jQuery вы используете? У меня работало с версией 3.1.0. Может быть, опубликуйте ссылку на jsbin/codepen, и я посмотрю.

Проблема с вашим обновленным кодом заключается в том, что в этой строке: Portfolio.hideAll($('#portfolio-content *')); Он выбирает ВСЕ элементы и, следовательно, также скрывает теги изображений. Просто измените это, чтобы быть более конкретным: Portfolio.hideAll($('#portfolio-content > div')); Это выберет непосредственные дочерние элементы #portfolio-content, которые являются элементами div.

Francisco Ruiz 31.01.2019 00:59

Как уже было сказано, ваш код работает просто отлично. См. фрагмент ниже, работающий с версией 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>

Другие вопросы по теме