单击重置按钮时重置 select 框同位素组合

Question

我有多个 select 框过滤器使用 jQuery 同位素过滤数据。我想通过单击按钮重置所有组合。我试过以下代码来重置它；但它只显示所有数据，实际上并没有重置过滤器选项；

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

我正在使用以下代码使 select 盒式过滤器正常工作；

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 设置为 * 来显式重置 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('*');
});

编辑：

我也更新了过滤逻辑以适应重置功能。
当没有找到给定过滤器的文档时添加了一条信息性消息。

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

单击重置按钮时重置 select 框同位素组合

Reset select box isotope combination on reset button click

javascript

jquery

jquery-isotope