世界！
我需要帮助改进带有两个过滤器的JQuery库的概念。
现在，我的逻辑/方法是使用过滤器作为类名＆amp; IDS。因此，当有人点击带有id的可过滤“按钮”时，它将触发对所有关联类执行的操作。现在，我可以过滤每个，它运作良好。但是，当我从1和2选择过滤器时，我希望它排除所有其他卡，即使它们属于两个过滤器中的一个。只有当卡片属于BOTH过滤器时才显示。现在，即使它只属于它显示的一个过滤器。
关于一次选择多个元素，我无法理解它。我很困惑如何“减少”这段代码。如果您有一个好主意来帮助减少代码，请分享。我还在学习JQuery。
我正在尝试设计＆amp;构建一个具有div容器的JQuery库的网页。我叫这些div容器，“卡”。每张卡都存储一个标题，一个模糊等...用户可以通过按类别（能力）和一周中的某一天过滤卡片来浏览卡片。这将有助于用户为他们挑选最好的卡。
现在，我手动为过滤器编写每个案例。它可能不是最有效的写作方式，但是嘿，它有效！但是，当我从1和2选择过滤器时，我希望它排除所有其他卡，即使它们属于两个过滤器中的一个。只有当卡片属于BOTH过滤器时才显示。现在，即使它只属于它显示的一个过滤器。
另外，我正在使用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部分写的东西，因为我逐步写出，没有循环或变量。如果这可以改善，我也是开放的。循环和变量只是让我感到困惑。谢谢!!
答案 0 :(得分：1)
好吧，所以我对你的逻辑进行了各种修改。
首先看看你的选择。您的所有类别选项都有class="categoryFilter"。这使得所有选择变得容易。它们上面还有一个data-target，它的值是该选项应该排序的类。所有类别也有一个，但它是空白的。
接下来，如果您查看当天的选项，他们也会看到class="dayFilter"，还有一个data-target，他们应该过滤这个类。
现在看看逻辑。我们要做的第一件事是获取对所有卡的引用并将其缓存在变量中。我们对所有日常过滤器和类别过滤器都这样做。
然后，我们会像以前一样显示所有卡片。然后，我们为类别和日期过滤器创建绑定。单击任何过滤器后，我们会单击过滤器上的selected类，并将其从所有其他相关过滤器中删除。一旦我们这样做，我们就会调用两个过滤器事件处理程序使用的filterCards方法。
此方法所做的第一件事是显示所有卡片，以重置我们之前可能已完成的任何过滤。
然后我们获得之前选择的dayFilter和categoryFilter。如果我们找到它们，我们会使用data-target（其中包含应该过滤的类）并将其推送到带有前导.的数组，以表示它是类选择器。
然后我们检查数组中是否包含元素。如果是，那么我们发现任何与我们的过滤器不匹配的元素。数组的连接使得如果您选择了日期和类别过滤器，则选择器将是两个加入的选择器，例如.monday.sort-button2，对于选择器，该元素必须具有这两个类。
查找没有匹配类的元素，我们隐藏它们，完成我们的组合过滤器。
我没有在您的codepen中包含用于更改某些过滤器选项的不透明度的逻辑，但这应该演示一种实现组合过滤器的方法。
// 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>
答案 1 :(得分：0)
这是你想要的吗？
// Filter Buttons
var filters = [];
$(".competency-menu img").on('click', function(){
$(".competency-menu img").addClass('PASSIVE').removeClass('ACTIVE');
$(this).removeClass('PASSIVE').addClass('ACTIVE');
filters[0] = $(this).data('filter');
applyFilter(filters);
});
$(".day-menu > p").on('click', function(){
$(".day-menu > p").addClass('PASSIVE').removeClass('ACTIVE');
$(this).removeClass('PASSIVE').addClass('ACTIVE');
filters[1] = $(this).data('filter');
applyFilter(filters);
});
function applyFilter(filter){
$(".class-card").fadeOut();
if(filter[0] && filter[1]){
$("." + filter[0] + "." + filter[1]).fadeIn();
} else if (filter[0]){
$("." + filter[0]).fadeIn();
} else if (filter[1]){
$("." + filter[1]).fadeIn();
} else {
$(".class-card").fadeIn();
}
}.ACTIVE {
opacity: 1.0;
}
.PASSIVE {
opacity:.45;
}
.class-card {
padding: 30px;
border: 1px #d6d6d6 solid;
border-radius: 5px;
width: 30%;
margin: 15px;
float: left;
}
.class-card h1 {
font-family: "Times New Roman", Times, serif;
font-weight:bold;
}
.class-card p {
font-size:14px;
line-height:18.27px;
margin-top:10px;
}
.class-card ul li {
margin:9px 0px 0px 15px;
color:#6f7179;
}
.space-6 {
height:32px;
display:block;
}
.day-menu p {
display: inline-block;
padding: 10px;
text-transform: uppercase;
font-size: 14px;
color: #c1c1c1;
letter-spacing: 1;
}<!-- 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 competency-menu">
<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" data-filter="" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_ALL_ACTIVE.jpg"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button1" data-filter="sort-button1" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_IT_ACTIVE_V2.jpg"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button2" data-filter="sort-button2" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_DR_ACTIVE.jpg"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button3" data-filter="sort-button3" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_FOP_ACTIVE_V2.jpg"/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button4" data-filter="sort-button4" width="100%" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Buttons_BYBS_ACTIVE.jpg"/>
</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" data-filter="">Any Day</p>
<p id="monday" data-filter="monday">Monday</p>
<p id="tuesday" data-filter="tuesday">Tuesday</p>
<p id="wednesday" data-filter="wednesday">Wednesday</p>
<p id="thursday" data-filter="thursday">Thursday</p>
<p id="friday" data-filter="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 -->
<!-- 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>