重置选择框上的同位素组合按钮点击重置

Question

我有多个选择框过滤器使用jQuery同位素过滤数据。我想重置所有的组合在一个按钮点击。我试过下面的代码来重置这个;但它只显示所有的数据，实际上并没有重置过滤器选项;

$('.reset').on('click', 'button', function () {
    $('.grid').isotope({
        filter: '*',
    });
});

我使用以下代码为选择框过滤器工作;

var $grid = $('.grid').isotope({
    itemSelector: '.element-item',
    layoutMode: 'vertical'
});
var filters = {};
// filter buttons
$('.filters-button-group').on('change', 'select.filterfields', function () {
    var $this = $(this);
    var group = $this.attr('data-filter-group');
    filters[ group ] = $this.find(':selected').attr('data-filter');
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    var selector = isoFilters.join('');
    $('.grid').isotope({ filter: selector });
    return false;
});

请帮我重置一个按钮上的所有组合过滤器。

Answer 1

您的grid链接到脚本中的dropdowns，但反之亦然，因此当您重置网格过滤器时，dropdowns不会重置。

可以通过设置*显式地重置dropdowns。

JS代码:

 // filter buttons
 $('.filters-button-group').on('change', 'select.filterfields', function () {
    $('.informativeSection').hide();
    var isoFilters = [];
    $('.option-set').each(function () {
        var filter = $(this).val();
        if (filter !== '*') {
            isoFilters.push($(this).find(':selected').attr('data-filter'));
        }
    });
    var selector = isoFilters.join('');
    console.log('selector:' + selector);
    $('.grid').isotope({
        filter: selector
    });
    //show no documents message
    if ($('.grid').data('isotope').filteredItems.length === 0) { $('.informativeSection').show(); }
    return false;
});
$('.reset').on('click', 'button', function () {
  $('.grid').isotope({ 
    filter: '*',
  });
  //reset the dropdowns explicitly
  $('.option-set').val('*');
});

编辑:

1. 我已经更新了过滤逻辑以及适应重置功能。
2. 当没有找到给定过滤器的文档时，增加了一个信息提示。

现场演示@ JSFiddle:http://jsfiddle.net/dreamweiver/kfk4jzkL/8/