jQuery列表过滤

Question

我有一个填充的JSON对象列表，我试图获取放置在最上方的过滤器： http : //codepen.io/JTBennett/pen/vxpMRJ

如您所见，我想出了一个使用以下代码的笨拙的意大利面条方法：

  $('input[name="newGuitars"]').on('change', function() {
    if (this.checked) {
      $('.vdListing').each(function(){
      var dng1 = $(this).find('.dNG').last()
      var dng = dng1.text()
      if (dng == '') {$(this).hide()}
                })
    }
              if (!this.checked) {
      $('.vdListing').each(function(){
      var dng1 = $(this).find('.dNG').last()
      var dng = dng1.text()
      if (dng == '') {$(this).show()}
                })
    }

});

我在新吉他上使用了它，并使用了吉他复选框，并意识到（除了是一种愚蠢的方法之外）我的过滤器可以隐藏/显示元素，而无需考虑其他过滤器条件。

我正在寻找一种更好的方法来进行此操作，任何帮助将不胜感激！

Answer 1

我只能从StackOverflow中的旧答案中找到解决方案。

希望对您有所帮助。

我为您量身定做。

此方法是最好的过滤方法，而不是使用您的方法。

因为您当前的方法不是很动态，所以选择器和数组都进行了硬编码，因此每次添加新的过滤器选项时，都必须添加代码来处理它。

相反，只需将更改处理程序绑定到所有过滤器复选框，就可以收集它们的值，并按它们各自的名称将它们分组，例如：

var $filterCheckboxes = $( 'input[name="newGuitars"]' );

$filterCheckboxes.on( 'change', function() {

    var selectedFilters = {};

    $filterCheckboxes.filter( ':checked' ).each( function() {

    if ( ! selectedFilters.hasOwnProperty( this.name ) ) {
        selectedFilters[ this.name ] = [];
    }

    selectedFilters[ this.name ].push( this.value );

    } );

} );

这将创建一个包含input-name -> value数组对的对象，例如：

selectedFilters = {
  'fl-colour': [ 'red', 'green' ],
  'fl-size': [ 'tiny' ]
};

然后，您可以遍历每个selectedFilters ，并过滤.dNG元素。 如果.dNG元素与每个命名集中的值匹配，则返回true，以便将该元素包含在$filteredResults集合中：

// create a collection containing all of the filterable elements
var $filteredResults = $( '.dNG' );

// loop over the selected filter name -> (array) values pairs
$.each( selectedFilters, function( name, filterValues ) {

  // filter each .dNG element
  $filteredResults = $filteredResults.filter( function() {

    var matched = false,
        currentFilterValues = $( this ).data( 'category' ).split( ' ' );

    // loop over each category value in the current .dNG's data-category
    $.each( currentFilterValues, function( _, currentFilterValue ) {

      // if the current category exists in the selected filters array
      // set matched to true, and stop looping. as we're ORing in each
      // set of filters, we only need to match once

      if ( $.inArray( currentFilterValue, filterValues) != -1 ) {
        matched = true;
        return false;
      }

    } );    

    // if matched is true the current .dNG element is returned
    return matched;    

  } );

} );

然后只需隐藏所有.dNG元素，并显示$filteredResults ，例如：

$( '.dNG' ).hide().filter( $filteredResults ).show();

您可以在这里看到jsfiddle。