Как создать галерею с несколькими фильтрами, например фильтр продуктов woocommerce/ecommerce
Мне нужна галерея с несколькими фильтрами, например фильтр продуктов woocommerce/ecommerce.
вот раскрывающийся список фильтров трех типов ЦВЕТ, РАЗМЕР и ФОРМА
например, если я выберу цвет: красный и зеленый, размер: маленький и форму: круглый
Таким образом, он должен фильтровать, какие ящики имеют следующие классы красный+маленький+круглый и какие ящики имеют следующие классы зеленый+маленький+круглый.
и мне нужно показать выбранное имя фильтра в строке имени фильтра
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class = "container">
<div class = "multifilter-gallery-wrap">
<div class = "row">
<div class = "col-sm-12">
<nav class = "navbar navbar-expand-lg navbar-light bg-light">
<ul class = "multifilter-gallery-nav nav">
<li class = "nav-item dropdown">
<a href = "#" class = "dropdown-toggle btn btn-secondary" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Color</a>
<ul class = "dropdown-menu not-close-dropdown" data-display = "static">
<li class = "multifilter-gallery-button color" data-filter = "red">
<input type = "checkbox" value = "on">
Red
</li>
<li class = "multifilter-gallery-button color" data-filter = "green">
<input type = "checkbox" value = "on">
green
</li>
</ul>
</li>
<li class = "nav-item dropdown">
<a href = "#" class = "dropdown-toggle btn btn-secondary" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "true" data-display = "static">Size</a>
<ul class = "dropdown-menu not-close-dropdown">
<li class = "multifilter-gallery-button size" data-filter = "small">
<input type = "checkbox">
Small
</li>
<li class = "multifilter-gallery-button size" data-filter = "medium">
<input type = "checkbox">
Medium
</li>
</ul>
</li>
<li class = "nav-item dropdown">
<a href = "#" class = "dropdown-toggle btn btn-secondary" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "true" data-display = "static">shape</a>
<ul class = "dropdown-menu not-close-dropdown">
<li class = "multifilter-gallery-button shape" data-filter = "square">
<input type = "checkbox">
square
</li>
<li class = "multifilter-gallery-button shape" data-filter = "round">
<input type = "checkbox">
round
</li>
</ul>
</li>
<li class = "multifilter-gallery-button clear btn btn-secondary" data-filter = "all">Reset</li>
</ul>
</nav>
<p class = "shape-name"> shape: (here will show the selected shape name)</p>
<p class = "color-name"> color: (here will show the selected color name)</p>
<p class = "size-name"> Size: (here will show the selected Size name)</p>
<div class = "row mt-5">
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
<div class = "bg-danger m-2" style = "height: 180px; width: 180px;">
<h2 class = "text-white">Red Small square</h2>
</div>
</div>
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
<div class = "bg-success m-2" style = "height: 200px; width: 200px;">
<h2 class = "text-white">green medium round</h2>
</div>
</div>
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
<div class = "bg-danger m-2" style = "height: 200px; width: 200px;">
<h2 class = "text-white">Red medium round</h2>
</div>
</div>
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
<div class = "bg-success m-2" style = "height: 180px; width: 180px;">
<h2 class = "text-white">green Small square</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>
<script type = "text/javascript">
(function ($) {
$(document).ready(function() {
// venue filter script
$(".multifilter-gallery-button").click(function(){
var value = $(this).attr('data-filter');
if (value == "all")
{
$(this).addClass("active");
$(".multifilter-gallery-button").not(this).removeClass('active').find('input[type = "checkbox"]').attr('checked',false);
$('.multifilter-gallery-box').show('1000');
}
else
{
$('.multifilter-gallery-button.active[data-filter = "all"]').removeClass('active');
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).find('input[type = "checkbox"]').attr('checked',false);
}else{
$(this).addClass("active");
$(this).find('input[type = "checkbox"]').attr('checked',true);
}
if ($('.multifilter-gallery-button.active').length){
var classes = '';
$('.multifilter-gallery-button.active').each(function(index, el) {
classes += '.'+$(this).attr('data-filter');
});
$(".multifilter-gallery-box").not(classes).hide('3000');
$('.multifilter-gallery-box').filter(classes).show('3000');
}else{
$('.multifilter-gallery-button[data-filter = "all"]').click();
}
}
});
$('ul.not-close-dropdown').on('click', function (event) {
event.stopPropagation();
});
///////////
})
})(jQuery);
</script>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 102
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
надеюсь, это решит вашу проблему. работает отлично. удалите свой код js и включите этот.
(function ($) {
$(document).ready(function() {
$('.multifilter-gallery-button').click(function(){
var value = $(this).data('filter');
if (value == 'all'){
$('.multifilter-gallery-button').removeClass('active');
$('.multifilter-gallery-button input[type = "checkbox"]').prop('checked', false);
$(this).addClass('active');
$('.multifilter-gallery-box').show();
$('.size-name').html('Size : '+'All');
$('.color-name').html('Color : '+'All');
$('.shape-name').html('Shape : '+'All');
}else{
$('.multifilter-gallery-button[data-filter = "all"]').removeClass('active');
$('.multifilter-gallery-box').hide();
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).find('input[type = "checkbox"]').prop('checked', false);
}else{
$(this).addClass('active');
$(this).find('input[type = "checkbox"]').prop('checked', true);
}
var colors = $('.multifilter-gallery-button.color.active');
var sizes = $('.multifilter-gallery-button.size.active');
var shapes = $('.multifilter-gallery-button.shape.active');
var colorsArray = $.map( colors, function( val, i ) {
return $(val).data('filter');
});
var sizesArray = $.map( sizes, function( val, i ) {
return $(val).data('filter');
});
var shapesArray = $.map( shapes, function( val, i ) {
return $(val).data('filter');
});
var combinations = [];
if (colorsArray.length > 0){
var colorsTexts = $.map( colors, function( val, i ) {
return $(val).text();
});
$('.color-name').html('Color : '+colorsTexts.join(', '));
combinations = colorsArray;
}else{
$('.color-name').html('Color : '+'No color selected');
}
if (sizesArray.length > 0){
var sizesTexts = $.map( sizes, function( val, i ) {
return $(val).text();
});
$('.size-name').html('Size : '+sizesTexts.join(', '));
if (combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
$.each($(sizesArray), function(ii, sz){
var combination = [c, sz];
combinations.push(combination);
});
});
}else{
combinations = sizesArray;
}
}else{
$('.size-name').html('Size : '+'No size selected');
}
if (shapesArray.length > 0){
var shapesTexts = $.map( shapes, function( val, i ) {
return $(val).text();
});
$('.shape-name').html('Shape : '+shapesTexts.join(', '));
if (combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
if ($.isArray(c)){
$.each($(shapesArray), function(ii, s){
var combination = $.merge([s], c);
combinations.push(combination);
});
}else{
$.each($(shapesArray), function(ii, s){
var combination = [c, s];
combinations.push(combination);
});
}
});
}else{
combinations = shapesArray;
}
}else{
$('.shape-name').html('Shape : '+'No shapes selected');
}
//show boxes
if (combinations.length > 0){
$.each($(combinations), function(i, val){
if ($.isArray(val)){
var classes = val.join('.');
$('.multifilter-gallery-box'+'.'+classes).show();
}else{
$('.multifilter-gallery-box'+'.'+val).show();
}
});
}else{
$('.multifilter-gallery-button[data-filter = "all"]').click();
}
}
});
})
})(jQuery);<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class = "container">
<div class = "multifilter-gallery-wrap">
<div class = "row">
<div class = "col-sm-12">
<nav class = "navbar navbar-expand-lg navbar-light bg-light">
<ul class = "multifilter-gallery-nav nav">
<li class = "nav-item dropdown">
<a href = "#" class = "dropdown-toggle btn btn-secondary" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Color</a>
<ul class = "dropdown-menu not-close-dropdown" data-display = "static">
<li class = "multifilter-gallery-button color" data-filter = "red">
<input type = "checkbox" value = "on">
Red
</li>
<li class = "multifilter-gallery-button color" data-filter = "green">
<input type = "checkbox" value = "on">
green
</li>
</ul>
</li>
<li class = "nav-item dropdown">
<a href = "#" class = "dropdown-toggle btn btn-secondary" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "true" data-display = "static">Size</a>
<ul class = "dropdown-menu not-close-dropdown">
<li class = "multifilter-gallery-button size" data-filter = "small">
<input type = "checkbox">
Small
</li>
<li class = "multifilter-gallery-button size" data-filter = "medium">
<input type = "checkbox">
Medium
</li>
</ul>
</li>
<li class = "nav-item dropdown">
<a href = "#" class = "dropdown-toggle btn btn-secondary" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "true" data-display = "static">shape</a>
<ul class = "dropdown-menu not-close-dropdown">
<li class = "multifilter-gallery-button shape" data-filter = "square">
<input type = "checkbox">
square
</li>
<li class = "multifilter-gallery-button shape" data-filter = "round">
<input type = "checkbox">
round
</li>
</ul>
</li>
<li class = "multifilter-gallery-button clear btn btn-secondary" data-filter = "all">Reset</li>
</ul>
</nav>
<p class = "shape-name"> shape: (here will show the selected shape name)</p>
<p class = "color-name"> color: (here will show the selected color name)</p>
<p class = "size-name"> Size: (here will show the selected Size name)</p>
<div class = "row mt-5">
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
<div class = "bg-danger m-2" style = "height: 180px; width: 180px;">
<h2 class = "text-white">Red Small square</h2>
</div>
</div>
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
<div class = "bg-success m-2" style = "height: 200px; width: 200px;">
<h2 class = "text-white">green medium round</h2>
</div>
</div>
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
<div class = "bg-danger m-2" style = "height: 200px; width: 200px;">
<h2 class = "text-white">Red medium round</h2>
</div>
</div>
<div class = "col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
<div class = "bg-success m-2" style = "height: 180px; width: 180px;">
<h2 class = "text-white">green Small square</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>только что обновил часть js, чтобы она работала правильно, теперь вы можете проверить, поэтому теперь любой фильтр можно выбрать первым, и теперь выбранный фильтр отображается в теге <p>
—
09.02.2019 19:04
Спасибо @Ashraful, вы сделали именно то, что я хотел
—
10.02.2019 13:35
Другие вопросы по теме
Как выбрать два столбца в datatable в php
Есть ли способ получить идентификатор нажатого значения и отправить его на другую страницу с помощью Jquery?
Как просмотреть введенное пользователем значение при нажатии в журнале консоли
Как заставить функцию on() 'click' работать бесконечно?
Как импортировать карусель совы в Vue.js
Измените значение var img_list с помощью javascript или php
Аффикс не работает должным образом на вкладках Bootstrap
Как я могу установить transformOrigin в jQuery?
Почему фильтрация раскрывающегося списка JQuery не работает в Safari?
XMLHttpRequest не может загрузиться из-за проверки контроля доступа для AJAX с Django
Похожие вопросы
Гарантирует ли ES6 Symbol 100% уникальный идентификатор?
Как удалить div в javascript без jquery?
Изменить источник видео после определенной продолжительности начала и окончания видео HTML5
Разница между фрагментами скрипта Google Analytics analytics.js и gtag.js
Карты Google - календарь - растянуть на всю ширину
Есть ли способ получить идентификатор нажатого значения и отправить его на другую страницу с помощью Jquery?
Динамическое и эффективное присвоение сегодняшней даты свойству в виде строки
Как просмотреть введенное пользователем значение при нажатии в журнале консоли
Изменить порядок отображения данных в d3
Как сделать нестандартные компоненты?
большое спасибо за ответ на мой вопрос. вы почти решили мою проблему, но сначала, если я хочу фильтровать по форме, это не фильтрация, например, я хочу видеть все маленькие, средние и круглые поля. но здесь я могу фильтровать таким образом. не могли бы вы решить это. другое дело, под кнопкой фильтра «форма: (здесь будет показано имя выбранной формы)» в этих строках мне нужно показать выбранное имя фильтра. в целом это будет галерея системы фильтрации электронной коммерции paperlesspost.com/cards/category/general-day-cards большое спасибо за помощь