JQuery过滤器库：结合两个过滤器？ [英] JQuery Filter Gallery: Combine Two Filters?

查看：143
本文介绍了JQuery过滤器库：结合两个过滤器？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在建造一张信息卡片的画廊，有两个过滤器。一个过滤器用于一天，另一个过滤器用于类别。该页面的内容应根据用户的选择而改变。



这些过滤器目前独立运行，我不知道如何将它们结合起来以获得无缝过滤体验。

第一个故障发生在您选择关注人物和任何一天时。您必须点击几次按钮才能看到毛刺。过滤器不显示专注于人和任何一天专用的课程。它显示的应该不存在的类别。



第二个小故障，当您点击全部显示时，不会出现不透明效果。 b
$ b

JS 用于过滤卡片 

  var $ cards = $（'。class-card'）; 
 var $ dayFilters = $（'。dayFilter'）; 
 var $ categoryFilters = $（'。categoryFilter'）; 
 var $ noResults = $（'＃noResults'）; 
 
 //显示页面加载的所有日期
 $ cards.show（）; 
 //隐藏无结果消息
 $ noResults.hide（）; 
 
 $ categoryFilters.on（'click'，function（e）{
 var $ category = $（e.target）; 
 
 $ categoryFilters.removeClass（ 'selected'）; 
 $ category.addClass（'selected'）
 
 filterCards（）; 
}）; 
 $ b $ dayFilters.on（'click'，function（e）{
 var $ day = $（e.target）; 
 
 $ dayFilters.removeClass（ 'selected'）; 
 $ day.addClass（'selected'）
 
 filterCards（）; 
}）; 
 
函数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（）; 
} 
 
} 
}

JS 为按钮设置不透明效果 

  //默认情况下，View All 是活动按钮
 $（'＃buttonAll'）。addClass（'ACTIVE'）; 
 $（'＃button1'）。addClass（'PASSIVE'）; 
 $（'＃button2'）。addClass（'PASSIVE'）; 
 $（'＃button3'）。addClass（'PASSIVE'）; 
 $（'＃button4'）。addClass（'PASSIVE'）; 
 //当用户选择buttonAll时，使其突出
 $（'＃buttonAll'）。click（function（）{
 $（'＃buttonAll'）。removeClass （'PASSIVE'）.addClass（'ACTIVE'）; 
 $（'＃button1'）。removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button2'） .removeClass（ 'ACTIVE'）.addClass（ '被动'）; 
 $（ '＃BUTTON3'）removeClass（ 'ACTIVE'）.addClass（ '被动'）; 
 $（'＃将Button4 '）.removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
}）; 
 //当用户选择button1时，使其突出
 $（'＃button1'）。click（function（）{
 $（'＃buttonAll'）。removeClass （'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button1'）。removeClass（'PASSIVE'）.addClass（'ACTIVE'）; 
 $（'＃button2'） .removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button3'）。removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button4 '）.removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
}）; 
 //当用户选择button2时，使其突出
 $（'＃button2'）。click（function（）{
 $（'＃buttonAll'）。removeClass （'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button1'）。removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button2'） .removeClass（'PASSIVE'）.addClass（'ACTIVE'）; 
 $（'＃button3'）。removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button4 '）.removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
}）; 
 //当用户选择button3时，使其突出
 $（'＃button3'）。click（function（）{
 $（'＃buttonAll'）。removeClass （'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button1'）。removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button2'） .removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button3'）。removeClass（'PASSIVE'）.addClass（'ACTIVE'）; 
 $（'＃button4 '）.removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
}）; 
 //当用户选择button4时，使其突出
 $（'＃button4'）。click（function（）{
 $（'＃buttonAll'）。removeClass （'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button1'）。removeClass（'ACTIVE'）.addClass（'PASSIVE'）; 
 $（'＃button2'） .removeClass（ 'ACTIVE'）.addClass（ '被动'）; 
 $（ '＃BUTTON3'）removeClass（ 'ACTIVE'）.addClass（ '被动'）; 
 $（'＃将Button4 '）.removeClass（'PASSIVE'）.addClass（'ACTIVE'）; 
}）;

我的页面托管在 CodePen 。首先，这是新的CodePen 。



我所做的是使用变量， category 和天分别保留所选的类别和日期过滤器值。这不是依赖每个滤镜元素上出现的 .selected 类。



这有首先消除对 .selected 类的需求的好处，其次，这意味着您的UI状态不会在DOM本身中持久存在。



我还删除了添加和删除 .ACTIVE 和 .PASSIVE 类，而是将其与筛选器单击事件侦听器结合使用。它避免了重复，并使所有内容更加整洁。



最后，我添加了大量的评论，希望能够解释每一步发生的事情，这样你就可以了解它是如何工作的



如果您有任何问题，请询问。 

  //准备卡，过滤器，并没有结果消息
 var $ cards = $（'。class-card'）; 
 var $ dayFilters = $（'。dayFilter'）; 
 var $ categoryFilters = $（'。categoryFilter'）; 
 var $ noResults = $（'＃noResults'）; 
 
 //通过调用过滤卡进行初始化
 filterCards（）; 
 
 //准备选定的类别和日期过滤器值
 var category = null; 
 var day = null; 
 
 //绑定点击事件以设置所选类别过滤器
 $ categoryFilters.on（'click'，function（e）{
 //获取点击类别过滤器
 var $ category = $（e.target）; 
 
 //取消选择所有类别，并选择点击类别
 $ categoryFilters.addClass（'PASSIVE'）。removeClass（'ACTIVE'）; 
 $ category.addClass（'ACTIVE'）。removeClass（'PASSIVE'）; 
 
 //记录点击的类别过滤器值
 category = $ category.data（'target' ）; 
 
 filterCards（）; 
}）; 
 
 //绑定点击事件以设置所选日期过滤器
 $ dayFilters.on（'click'，function（e）{
 //获取点击日过滤器
 var $ day = $（e.target）; 
 
 //取消选择所有日子，并选择点击日
 $ dayFilters.addClass（'PASSIVE'）。removeClass（'ACTIVE'）; 
 $ day.addClass（'ACTIVE'）。removeClass（'PASSIVE'）; 
 
 //记录点击过滤日期值
 day = $ day.data（'target' ）; 
 
 filterCards（）; 
}）; 
 
函数filterCards（）{
 //显示所有卡片并隐藏任何结果消息
 $ cards.show（）; 
 $ noResults.hide（）; 
 
 //重置过滤器类
 var filters = []; 
 
 //添加类别和日期过滤器类，其中选择
 if（category）filters.push（'。'+ category）; 
 if（day）filters.push（'。'+ day）; 
 
 //过滤显示一个或多个过滤器的卡片
 if（filters.length）{
 //隐藏不匹配过滤器的卡片
 $ cards.not （filters.join（ ''））隐藏（）; 
 
 //如果没有显示卡片，则不显示结果消息
 if（$ cards.has（'：visible'）。length === 0）$ noResults.show（）; 
} 
}


I am building a gallery of informative cards, with two filters. One filter is for day and the other filter is for category. The content of the page should change according to the user's choice.

The filters are currently working independently, and I don't know how to combine them for a seamless filtering experience.

The first glitch, happens when you pick both "Focus on People" and "Any Day". You'll have to click the buttons a few times to see the glitch. The filter doesn't display courses exclusive to "Focus on People" and "Any Day". It shows categories that should really not be there.

The second glitch, when you click "Show All", the opacity effect doesn't appear.

JS For filtering the cards

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();
      }

  }
}

JS For opacity effect on buttons

// By default, "View All" is the active button
$('#buttonAll').addClass( 'ACTIVE' );
$('#button1').addClass( 'PASSIVE' );
$('#button2').addClass( 'PASSIVE' );
$('#button3').addClass( 'PASSIVE' );
$('#button4').addClass( 'PASSIVE' );
// When user chooses, "buttonAll", make it stand-out
$('#buttonAll').click(function() {
    $('#buttonAll').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button1", make it stand-out
$('#button1').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button2", make it stand-out
$('#button2').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button3", make it stand-out
$('#button3').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button4", make it stand-out
$('#button4').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );    
});

I have the page hosted on CodePen.

解决方案

Firstly, here's a new working CodePen.

What I have done is to use variables, category and day to persist the chosen category and day filter values respectively. This is instead of relying on the existence of a .selected class appearing on each filter element.

This has the benefit of firstly removing the need for the .selected classes all together, and secondly it means that your UI state isn't being persisted in the DOM itself.

I have also removed all of your code for adding and removing the .ACTIVE and .PASSIVE classes, and instead combined this with the filter click event listeners. It avoids the repetition and keeps everything much neater.

Finally, I've added copious comments to hopefully explain what is happening at each step so that you can learn how it works.

If you have any questions, ask.

// Prepare cards, filters, and no results message
var $cards = $('.class-card');
var $dayFilters = $('.dayFilter');
var $categoryFilters = $('.categoryFilter');
var $noResults = $('#noResults');

// Initialise by calling filter cards
filterCards();

// Prepare selected category and day filter values
var category = null;
var day = null;

// Bind click event to set selected category filter
$categoryFilters.on('click', function (e) {
  // Get clicked category filter
  var $category = $(e.target);

  // Deselect all categories, and select clicked category
  $categoryFilters.addClass('PASSIVE').removeClass('ACTIVE');
  $category.addClass('ACTIVE').removeClass('PASSIVE');

  // Record clicked category filter value
  category = $category.data('target');

  filterCards();
});

// Bind click event to set selected day filter
$dayFilters.on('click', function (e) {
  // Get clicked day filter
  var $day = $(e.target);

  // Deselect all days, and select clicked day
  $dayFilters.addClass('PASSIVE').removeClass('ACTIVE');
  $day.addClass('ACTIVE').removeClass('PASSIVE');

  // Record clicked day filter value
  day = $day.data('target');

  filterCards();
});

function filterCards() {
  // Show all cards and hide no results message
  $cards.show();
  $noResults.hide();

  // Reset filter classes
  var filters = [];

  // Add category and day filter classes, where selected
  if (category) filters.push('.' + category);
  if (day) filters.push('.' + day);

  // Filter cards where one or more filters selected
  if (filters.length) {
    // Hide cards that do not match filters
    $cards.not(filters.join('')).hide();

    // Show no results message if no cards are visible
    if ($cards.has(':visible').length === 0) $noResults.show();
  }
}

这篇关于JQuery过滤器库：结合两个过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆