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 at here.

jQuery列表过滤

1 个答案: