<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики. Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Фильтр категорий товаров на JavaScript (часть 3)

Фильтр категорий товаров на JavaScript (часть 3)

Что вообще должно происходить с этими кнопками и карточками товаров? При клике пользователя по черной кнопке, на сайте должны остаться только черные карточки товаров. Соответственно при кликах по красной или зеленой кнопке, мы видим исключительно красные или зеленые карточки. Поскольку на странице будет взаимодействие с кнопками и карточками, то их все следует занести в переменные.

Алгоритм работы фильтрации

Найдем все наши кнопки по классу button с помощью метода querySelectorAll и запишем эту коллекцию в переменную buttons. При клике на кнопку мы будем получать ту категорию, к которой данная кнопка принадлежит. Нужную категорию предстоит искать в списке карточек. Берется каждая карточка и сравнивается с категорией. Если она из той же категории, то мы её оставляем видимой на странице. А если нет, то карточка скрывается. По аналогии с кнопками, коллекция карточек так же отправиться в другую переменную cards.

const buttons = document.querySelectorAll('.button')
const cards = document.querySelectorAll('.card')

Добавление дата-атрибутов в HTML коде

Поставим на все кнопки дата-атрибут data-filter с уникальным значением, чтобы JavaScript мог различать их.

<button class="button button_all" data-filter="all">All</button>
<button class="button button_clothing" data-filter="clothing">Clothing</button>
<button class="button button_decor" data-filter="decor">Decor</button>
<button class="button button_bags" data-filter="bags">Bags</button>

Цикл forEach и addEventListener

Переберем циклом forEach коллекцию кнопок. При прохождении цикла на каждой кнопке, forEach четыре раза вызывает callback функцию. Функция примет на себя один параметр - саму кнопку button. Клик по кнопке - это событие, для отслеживания которого существует обработчик события click, а метод addEventListener добавляет его на все кнопки поочередно. Мы пробегаемся циклом по каждой из кнопок и на каждую из них добавляем обработчик события click. Первым параметром добавляем само событие клика, а вторым параметром - callback функцию, которая будет вызываться при срабатывании данного события.

buttons.forEach((button) => {
    button.addEventListener('click', () => {

Считываем с каждой кнопки, установленное на неё значение атрибута data-filter (слово после знака =). Это слово и есть название категории. Таким нехитрым способом мы узнаем к какой категории относится кнопка, по которой кликнул пользователь и затем текущую категорию заносим в переменную currentCategory.

const currentCategory = button.dataset.filter
// Здесь сработает функция
filter(currentCategory, cards)
})
})

На данном этапе браузер знает по какой кнопке был клик и какую категорию нужно возвращать. Чтобы убедиться, что все сделано правильно, выведем в консоль содержимое переменной currentCategory при клике на каждую кнопку.

console.log(currentCategory)

Фильтр категорий товаров на JavaScript.

Пишем функцию

Мы добились своего и теперь при клике на кнопку мы получаем категорию к которой эта кнопка принадлежит. Что дальше? Нам нужно написать функцию, которая будет проверять, на какую кнопку в данный момент нажал пользователь. Затем она получит все карточки, пробежится по ним и найдет все карточки, относящиеся к выбранной категории. Карточки из той же категории она оставит, а все остальные скроет.

Объявляем функцию с именем filter, принимающую два параметра - категорию (category) и элементы (items). Items - это карточки товара, которые будут проходить через фильтр. Цикл forEach пробежится по всем items (карточкам) и проверит содержит ли конкретный элемент, выбранную категорию (переданную в параметр category). У каждой карточки есть свой уникальный класс с названием категории. Берем каждую карточку и проверяем содержит ли она тот же класс, что и у категории. Результат проверки запишется в переменную isItemFilter. Если категория есть, то карточка остается видимой. Остальные карточки скрываются.

function filter (category, items) {
  items.forEach((item) => {
    // проверка на соответствие категории
    const isItemFiltered = !item.classList.contains(category)
    // Заведем переменную для показа всех карточек в категории All
    const isShowAll = category.toLowerCase() === 'all'
    // Если карточка не содержит данную категорию
    if (isItemFiltered && !isShowAll) {
    // Добавлять класс hide
        item.classList.add('hide')
// В противном случае, удалять класс hide
    } else {
        item.classList.remove('hide')
    }
  })
}

Как скрыть карточку? Создадим в CSS класс hide.

.hide {
    display: none; /* скрывает элемент */
}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.