带有2个过滤器的JQuery Gallery [英] JQuery Gallery with 2 Filters
本文介绍了带有2个过滤器的JQuery Gallery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
世界！
我需要帮助来完善具有两个过滤器的JQuery画廊的概念.
现在，我的逻辑/方法是将过滤器用作类名& ID.因此，当有人单击带有ID的可过滤按钮"时，它将触发对所有关联类采取的操作.现在，我可以过滤每个过滤器，并且效果很好.但是，当我从1和2中选择一个过滤器时，我希望它排除所有其他卡，即使它们属于两个过滤器之一.仅当该卡属于两个过滤器时，才应显示.现在，即使它仅属于一个过滤器，它也会显示出来.
关于一次选择多个元素，我无法确定.我很困惑如何减少"这段代码.如果您有个很棒的想法可以减少代码，请分享.我还在学习JQuery.
我正在尝试设计&构建一个包含div容器的JQuery画廊的网页.我称这些div容器为卡片".每张卡都存储标题，摘要等.用户可以通过按类别(权限)和星期几过滤卡来浏览卡.这将帮助用户选择最适合他们的卡.
现在，我手动为过滤器编写每种情况.这可能不是最有效的编写方法，但是，它有效！但是，当我从1和2中选择一个过滤器时，我希望它排除所有其他卡，即使它们属于两个过滤器之一.仅当该卡属于两个过滤器时，才应显示.现在，即使它仅属于一个过滤器，它也会显示出来.
此外，我正在使用Bootsrap构建页面.
HTML 2过滤器设置
<!-- First Filter, by Category -->
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="buttonAll" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button1" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button2" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button3" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button4" src="..."/>
</div>
<!-- Second Filter, by Day -->
<p id="dayAll">Any Day</p>
<p id="monday">Monday</p>
<p id="tuesday">Monday</p>
<p id="wednesday">Wednesday</p>
<p id="thursday">Thursday</p>
<p id="friday">Friday</p>
HTML 卡/图库设置
<div class="container">
<div class="row">
<!-- START CLASS CARD -->
<div class="class-card sort-button1 sort-button2 sort-button3 sort-button4 monday">
<h1>Class Title</h1>
<h3>Monday @ 3:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 monday">
<h1>Class Title</h1>
<h3>Monday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- plus a bunch more cards -->
</div><!-- end row -->
</div><!-- end container -->
JS 有效的过滤器1
// Filter 1: by Day
// Show cards for all days of week by default
$('.monday').show();
$('.tuesday').show();
$('.wednesday').show();
$('.thursday').show();
$('.friday').show();
// When user clicks "View All" show cards for all days of week
$('#dayAll').click(function() {
$('.monday').fadeIn();
$('.tuesday').fadeIn();
$('.wednesday').fadeIn();
$('.thursday').fadeIn();
$('.friday').fadeIn();
$('.monday').fadeIn();
});
// When user clicks "Monday" show cards for Monday and hide others
$('#monday').click(function() {
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
$('.monday').fadeIn();
});
// When user clicks "Tuesday" show cards for Tuesday and hide others
$('#tuesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeIn();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Wednesday" show cards for Wednesday and hide others
$('#wednesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeIn();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Thursday" show cards for Thursday and hide others
$('#thursday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeIn();
$('.friday').fadeOut();
});
// When user clicks "Friday" show cards for Friday and hide others
$('#friday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeIn();
});
JS 过滤器2，有效
// Filter 2: by Category (Competency)
// Show cards for all categories by default
$('.sort-button1').show();
$('.sort-button2').show();
$('.sort-button3').show();
$('.sort-button4').show();
// When user clicks "View All" show cards for all categories
$('#buttonAll').click(function() {
$('.sort-button1').fadeIn();
$('.sort-button2').fadeIn();
$('.sort-button3').fadeIn();
$('.sort-button4').fadeIn();
});
// When user clicks "button1" show cards for button1 and hide others
$('#button1').click(function() {
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button1').fadeIn();
});
// When user clicks "button2" show cards for button2 and hide others
$('#button2').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button2').fadeIn();
});
// When user clicks "button3" show cards for button3 and hide others
$('#button3').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button3').fadeIn();
});
// When user clicks "button4" show cards for button4 and hide others
$('#button4').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeIn();
});
在 CodePen 上查看完整的项目.
我仍然是初学者JQuery程序员，因此，我无法在本文中放入所有代码.您能看一下我的CodePen并查看其余内容吗?
您可能会嘲笑我为JS部分编写的内容，因为我逐步编写了代码，没有循环或变量.如果可以改善这一点，我也很乐意.此时，循环和变量使我感到困惑.谢谢！！
解决方案
好的，所以我对您的逻辑进行了各种更改.
首先，请看一下您的选择.您所有的类别选项上都带有class="categoryFilter".这样可以很容易地将它们全部选中.它们上还有一个data-target，它具有选项应在其上进行排序的类的值.所有类别也都有一个，但为空白.
接下来，如果您查看日间选择，它们上还会显示一个class="dayFilter"以及一个应对其进行过滤的类的data-target.
现在看一下逻辑.我们要做的第一件事是获得对您所有卡的引用，并将其缓存在变量中.我们对所有的一天过滤器和类别过滤器进行相同的操作.
然后我们像以前一样显示所有卡.
然后，我们为类别和日期过滤器创建绑定.单击任何过滤器后，我们将selected类放在单击的过滤器上，并将其从所有其他相关过滤器中删除.完成此操作后，我们将调用两个过滤器事件处理程序都使用的filterCards方法.
此方法要做的第一件事是显示所有卡，以重置我们之前可能执行的所有过滤操作.
然后我们获得先前选择的dayFilter和categoryFilter.如果找到它们，我们将使用它们的data-target(具有应过滤的类)，并将其推入带有前导.的数组，以表示它是一个类选择器.
然后我们检查数组中是否包含元素.如果是这样，那么我们会找到与过滤器不匹配的任何元素.数组的联接使得如果选择日期和类别过滤器，则选择器将是两个选择器联接在一起的，例如.monday.sort-button2，对于选择器来说，该元素表示元素必须具有这两个类. >
找到没有匹配类的元素，我们将它们隐藏起来，从而完成了组合过滤器.
我没有在代码笔中包含更改某些过滤器选项的不透明度的逻辑，但这应该演示一种实现组合过滤器的方法.
// Filter Buttons
var $cards = $('.class-card');
var $dayFilters = $('.dayFilter');
var $categoryFilters = $('.categoryFilter');
var $noResults = $('#noResults');
// Show all days on page load
$cards.show();
// Hide the no results message
$noResults.hide();
$categoryFilters.on('click', function(e){
var $category = $(e.target);
$categoryFilters.removeClass('selected');
$category.addClass('selected')
filterCards();
});
$dayFilters.on('click', function(e){
var $day = $(e.target);
$dayFilters.removeClass('selected');
$day.addClass('selected')
filterCards();
});
function filterCards () {
$cards.show();
$noResults.hide();
var $day = $dayFilters.filter('.selected');
var $category = $categoryFilters.filter('.selected');
var filterClasses = [];
if ($day.length) filterClasses.push('.'+ $day.data('target'));
if ($category.length) filterClasses.push('.'+ $category.data('target'));
if (filterClasses) {
var filter = filterClasses.join('');
$cards.not(filter).hide();
if (!$cards.filter(filter).length) {
$noResults.show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 3RD PARTY PLUG-INS -->
<!-- BOOTSRAP CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- TOUR CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css">
<!-- SLIDER CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.css">
<!-- LIGHTBOX CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css">
<!-- IN-HOUSE PLUG-INS -->
<!-- DAILY DOSE THUMBNAIL: MAIN CSS -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/26p04xz6frwy51fbt3d0kby8d55eisde.css">
<!-- DAILY DOSE THUMBNAIL: MOBILE BREAKPOINTS CSS -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/7x469uo9iofg276dm79yduzj1vujjj08.css">
<!-- CSOD Overrides -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/8zp03gs0o59gz43i4gr33i4nhwp6h719.css">
<!-- LightSlider Overrides -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/aminxarvz1xsrkp21p470kz3tyanwcpe.css">
<!-- Core CSS Styles -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/uwonou0jrd00r7q8or538r8a92jwpusp.css">
<span class="space-6"></span>
<div class="container">
<div class="row">
<img width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Oldies_But_Goodies.jpg"/>
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<img width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Browse_Courses_by_Competency_V2.jpg"/>
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<div class="col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-offset-1 col-xs-2">
<img id="buttonAll" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_ALL_ACTIVE.jpg" data-target="" />
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button1" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_IT_ACTIVE_V2.jpg" data-target="sort-button1"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button2" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_DR_ACTIVE.jpg" data-target="sort-button2"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button3" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_FOP_ACTIVE_V2.jpg" data-target="sort-button3"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button4" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_BYBS_ACTIVE.jpg" data-target="sort-button4"/>
</div>
</div><!-- end row -->
</div><!-- end col-md-offset-2 col-md-8 -->
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<h2 class="text-center">And by day:</h2>
</div><!-- end row -->
<span class="space-6"></span>
<div class="day-menu row text-center">
<p id="dayAll" class="dayFilter" data-target="">Any Day</p>
<p id="monday" class="dayFilter" data-target="monday">Monday</p>
<p id="tuesday" class="dayFilter" data-target="tuesday">Tuesday</p>
<p id="wednesday" class="dayFilter" data-target="wednesday">Wednesday</p>
<p id="thursday" class="dayFilter" data-target="thursday">Thursday</p>
<p id="friday" class="dayFilter" data-target="friday">Friday</p>
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<!-- START CLASS CARD -->
<div class="class-card sort-button1 sort-button2 sort-button3 sort-button4 monday">
<h1>Class Title</h1>
<h3>Monday @ 3:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 monday">
<h1>Class Title</h1>
<h3>Monday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 sort-button3 tuesday">
<h1>Class Title</h1>
<h3>Tuesday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button4 wednesday">
<h1>Class Title</h1>
<h3>Wednesday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button1 sort-button4 thursday">
<h1>Class Title</h1>
<h3>Thursday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button1 friday">
<h1>Class Title</h1>
<h3>Friday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 thursday">
<h1>Class Title</h1>
<h3>Thursday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 wednesday">
<h1>Class Title</h1>
<h3>Wednesday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
</div><!-- end row -->
</div><!-- end container -->
<div id="noResults" style="display:none">
No classes that day. Try another day!
</div>
<!-- JQUERY JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- BOOTSRAP JS -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- TOUR JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script>
<!-- SLIDER JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.js"></script>
<!-- FANCY BOX JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
World!
I need help refining the concept for a JQuery gallery with two filters.
Right now, my logic/approach is to use the filters as class names & ids. So, when someone clicks a filterable 'button' with an id, it will trigger an action to be taken on all associated classes. Now, I can filter each and it works good. BUT, when I select a filter from 1 AND 2, I want it to rule-out all other cards, even if they belong to one of the two filters. Only if the card belongs to BOTH filters should it show. Right now, even if it only belongs to one filter it shows.
In regards to selecting multiple elements at one time, I can't wrap my mind around it. I am confused how to "reduce" this code. If you have a great idea to help reduce the code, please share. I am still learning JQuery.
I am trying to design & build a webpage that features a JQuery gallery of div containers. I am calling these div containers, "cards". Each card stores a title, a blurb, etc... The user can browse cards by filtering the cards by category (competency) and day of the week. This will help the user pick the best card for them.
Right now, I manually write each case for the filter. It's probably not the most efficient way of writing this, but hey, it works! BUT, when I select a filter from 1 AND 2, I want it to rule-out all other cards, even if they belong to one of the two filters. Only if the card belongs to BOTH filters should it show. Right now, even if it only belongs to one filter it shows.
Also, I am building the page with Bootsrap.
HTML 2 Filter Setup
<!-- First Filter, by Category -->
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="buttonAll" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button1" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button2" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button3" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button4" src="..."/>
</div>
<!-- Second Filter, by Day -->
<p id="dayAll">Any Day</p>
<p id="monday">Monday</p>
<p id="tuesday">Monday</p>
<p id="wednesday">Wednesday</p>
<p id="thursday">Thursday</p>
<p id="friday">Friday</p>
HTML Card / Gallery setup
<div class="container">
<div class="row">
<!-- START CLASS CARD -->
<div class="class-card sort-button1 sort-button2 sort-button3 sort-button4 monday">
<h1>Class Title</h1>
<h3>Monday @ 3:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 monday">
<h1>Class Title</h1>
<h3>Monday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- plus a bunch more cards -->
</div><!-- end row -->
</div><!-- end container -->
JS The filter 1, in effect
// Filter 1: by Day
// Show cards for all days of week by default
$('.monday').show();
$('.tuesday').show();
$('.wednesday').show();
$('.thursday').show();
$('.friday').show();
// When user clicks "View All" show cards for all days of week
$('#dayAll').click(function() {
$('.monday').fadeIn();
$('.tuesday').fadeIn();
$('.wednesday').fadeIn();
$('.thursday').fadeIn();
$('.friday').fadeIn();
$('.monday').fadeIn();
});
// When user clicks "Monday" show cards for Monday and hide others
$('#monday').click(function() {
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
$('.monday').fadeIn();
});
// When user clicks "Tuesday" show cards for Tuesday and hide others
$('#tuesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeIn();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Wednesday" show cards for Wednesday and hide others
$('#wednesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeIn();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Thursday" show cards for Thursday and hide others
$('#thursday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeIn();
$('.friday').fadeOut();
});
// When user clicks "Friday" show cards for Friday and hide others
$('#friday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeIn();
});
JS The filter 2, in effect
// Filter 2: by Category (Competency)
// Show cards for all categories by default
$('.sort-button1').show();
$('.sort-button2').show();
$('.sort-button3').show();
$('.sort-button4').show();
// When user clicks "View All" show cards for all categories
$('#buttonAll').click(function() {
$('.sort-button1').fadeIn();
$('.sort-button2').fadeIn();
$('.sort-button3').fadeIn();
$('.sort-button4').fadeIn();
});
// When user clicks "button1" show cards for button1 and hide others
$('#button1').click(function() {
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button1').fadeIn();
});
// When user clicks "button2" show cards for button2 and hide others
$('#button2').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button2').fadeIn();
});
// When user clicks "button3" show cards for button3 and hide others
$('#button3').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button3').fadeIn();
});
// When user clicks "button4" show cards for button4 and hide others
$('#button4').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeIn();
});
See the full project on CodePen.
I am still a beginner JQuery programmer, so, I can't fit all of my code in this article. Can you please look at my CodePen and view the rest of it?
You might laugh at what I have written for the JS part, because I wrote out step-by-step, no loops or variables. If this can be improved, I am open as well. The loops and variable just confuse me at this point. Thank you!!
解决方案
Alright, so I've made various changes to your logic.
First off take a look at your options. All your category options have a class="categoryFilter" on them. This makes it easy to select them all. They also have a data-target on them which has as it's value the class that the option should sort on. The all categories also has one, but it is blank.
Next if you take a look at your day options, they also have a class="dayFilter" on them and also a data-target with the class they should filter on.
Now take a look at the logic. The first thing we do is get a reference to all your cards and cache it in a variable. We do the same for all our day filters and category filters.
We then show all the cards as you were before.
Then, we create bindings for the category and day filters. When any of the filters are clicked, we put the selected class on the filter clicked, and remove it from all the other related filters. Once we do that, we then call the filterCards method which is used by both filter event handlers.
The first thing this method does is shows all the cards, to reset any filtering we might have done previously.
We then get the dayFilter and categoryFilter that were previously selected. If we find them, we take their data-target (which has the class that should be filtered on) and push it to an array with the leading . to signify that it is a class selector.
Then we check if the array has elements in it. If it does, then we find any element that does not match our filters. The joining of the array makes it so that if you selected a day and category filter that the selector will be the two selectors joined, such as .monday.sort-button2, which for a selector says the element has to have both of those classes.
Finding elements that do not have the matching class(es), we hide them, accomplishing our combined filter.
I did not include the logic you had in your codepen for changing the opacity of some of the filter options, but this should demonstrate one approach for implementing a combined filter.
// Filter Buttons
var $cards = $('.class-card');
var $dayFilters = $('.dayFilter');
var $categoryFilters = $('.categoryFilter');
var $noResults = $('#noResults');
// Show all days on page load
$cards.show();
// Hide the no results message
$noResults.hide();
$categoryFilters.on('click', function(e){
var $category = $(e.target);
$categoryFilters.removeClass('selected');
$category.addClass('selected')
filterCards();
});
$dayFilters.on('click', function(e){
var $day = $(e.target);
$dayFilters.removeClass('selected');
$day.addClass('selected')
filterCards();
});
function filterCards () {
$cards.show();
$noResults.hide();
var $day = $dayFilters.filter('.selected');
var $category = $categoryFilters.filter('.selected');
var filterClasses = [];
if ($day.length) filterClasses.push('.'+ $day.data('target'));
if ($category.length) filterClasses.push('.'+ $category.data('target'));
if (filterClasses) {
var filter = filterClasses.join('');
$cards.not(filter).hide();
if (!$cards.filter(filter).length) {
$noResults.show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 3RD PARTY PLUG-INS -->
<!-- BOOTSRAP CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- TOUR CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css">
<!-- SLIDER CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.css">
<!-- LIGHTBOX CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css">
<!-- IN-HOUSE PLUG-INS -->
<!-- DAILY DOSE THUMBNAIL: MAIN CSS -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/26p04xz6frwy51fbt3d0kby8d55eisde.css">
<!-- DAILY DOSE THUMBNAIL: MOBILE BREAKPOINTS CSS -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/7x469uo9iofg276dm79yduzj1vujjj08.css">
<!-- CSOD Overrides -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/8zp03gs0o59gz43i4gr33i4nhwp6h719.css">
<!-- LightSlider Overrides -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/aminxarvz1xsrkp21p470kz3tyanwcpe.css">
<!-- Core CSS Styles -->
<link rel="stylesheet" href="https://sephora.box.com/shared/static/uwonou0jrd00r7q8or538r8a92jwpusp.css">
<span class="space-6"></span>
<div class="container">
<div class="row">
<img width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Oldies_But_Goodies.jpg"/>
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<img width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Browse_Courses_by_Competency_V2.jpg"/>
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<div class="col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-offset-1 col-xs-2">
<img id="buttonAll" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_ALL_ACTIVE.jpg" data-target="" />
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button1" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_IT_ACTIVE_V2.jpg" data-target="sort-button1"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button2" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_DR_ACTIVE.jpg" data-target="sort-button2"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button3" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_FOP_ACTIVE_V2.jpg" data-target="sort-button3"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button4" class="categoryFilter" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_BYBS_ACTIVE.jpg" data-target="sort-button4"/>
</div>
</div><!-- end row -->
</div><!-- end col-md-offset-2 col-md-8 -->
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<h2 class="text-center">And by day:</h2>
</div><!-- end row -->
<span class="space-6"></span>
<div class="day-menu row text-center">
<p id="dayAll" class="dayFilter" data-target="">Any Day</p>
<p id="monday" class="dayFilter" data-target="monday">Monday</p>
<p id="tuesday" class="dayFilter" data-target="tuesday">Tuesday</p>
<p id="wednesday" class="dayFilter" data-target="wednesday">Wednesday</p>
<p id="thursday" class="dayFilter" data-target="thursday">Thursday</p>
<p id="friday" class="dayFilter" data-target="friday">Friday</p>
</div><!-- end row -->
</div><!-- end container -->
<span class="space-6"></span>
<div class="container">
<div class="row">
<!-- START CLASS CARD -->
<div class="class-card sort-button1 sort-button2 sort-button3 sort-button4 monday">
<h1>Class Title</h1>
<h3>Monday @ 3:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 monday">
<h1>Class Title</h1>
<h3>Monday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 sort-button3 tuesday">
<h1>Class Title</h1>
<h3>Tuesday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button4 wednesday">
<h1>Class Title</h1>
<h3>Wednesday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button1 sort-button4 thursday">
<h1>Class Title</h1>
<h3>Thursday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button1 friday">
<h1>Class Title</h1>
<h3>Friday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 thursday">
<h1>Class Title</h1>
<h3>Thursday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 wednesday">
<h1>Class Title</h1>
<h3>Wednesday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
</div><!-- end row -->
</div><!-- end container -->
<div id="noResults" style="display:none">
No classes that day. Try another day!
</div>
<!-- JQUERY JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- BOOTSRAP JS -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- TOUR JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script>
<!-- SLIDER JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.js"></script>
<!-- FANCY BOX JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
这篇关于带有2个过滤器的JQuery Gallery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
