javascript - 带有 2 个过滤器的 JQuery 画廊

标签 javascript jquery css filter filtering

世界!

我需要帮助改进带有两个过滤器的 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 并查看它的其余部分吗？

你可能会 mock 我写的 JS 部分，因为我是一步步写出来的，没有循环和变量。如果可以改善这一点，我也持开放态度。在这一点上，循环和变量让我感到困惑。谢谢!!

最佳答案

好的，我已经对您的逻辑进行了各种更改。

首先看看您的选择。您所有的类别选项都有一个 class="categoryFilter"。这使得将它们全部选中变得容易。它们还有一个 data-target ，它具有选项应该排序的类的值。所有类别也有一个，但它是空白的。

接下来，如果您查看您的日期选项，它们也有一个 class="dayFilter"，还有一个 data-target 以及它们应该的类过滤。

现在看看逻辑。我们做的第一件事是获取对所有卡片的引用并将其缓存在一个变量中。我们对所有日期过滤器和类别过滤器都执行相同的操作。

然后我们会像之前一样显示所有卡片。

然后，我们为类别和日期过滤器创建绑定(bind)。单击任何过滤器时，我们将 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>

关于javascript - 带有 2 个过滤器的 JQuery 画廊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50239873/

上一篇：html - 如何创建在调整网页大小时保持的列间隙？

下一篇：Jquery UI模式在文本输入上有右边距

相关文章：

javascript - 如何使用 angular-js 变量的函数创建 DOM？

javascript - JScript编译报错nodejs命令行工具

javascript - 使用 Snap SVG 时的备用/后备图像

javascript - Flickr Json 调用 API

javascript - Jquery Ajax 改变 html 表的内容

css - 将新行/n 转换为 Angular 换行符

javascript - 从 HTML5 存储打开 PDF

javascript - JQuery:如果表头 <th> 有一个类，将类添加到表单元格 <td>

javascript - 如何将一个巨大的div分割成多个div？

jquery - 选择单选按钮时，在 div 内选择时放置文本。

©2024 IT工具网  联系我们