2

我尝试实现同位素组合过滤器。三个过滤器之一应该设置为一个选择，另外两个过滤器应该根据这些过滤器显示所有项目。一切正常，但有一个例外：第一次单击时，预选“丢失”，并且显示了根据预选过滤器的所有项目。只有在单击预选过滤器后，一切正常。

由于我是初学者，我不知道如何做到这一点。任何想法如何解决这个问题？非常感谢！

<script>


$('#container').isotope({ filter: '.current' });

$(function(){

var $container = $('#container'), filters = {};

$container.isotope({
    itemSelector : '.prod'
});

// filter buttons
$('.filter a').click(function(){
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return;
  }

  var $optionSet = $this.parents('.option-set');

  // change selected class
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  // store filter value in object
  // i.e. filters.color = 'red'
  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter-value');
  // convert object into array
  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }
  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });

  return false;
});

});

4

1 回答 1

0

我有同样的问题。我找到的唯一解决方案是在页面加载后模拟单击该特定选择的按钮。这可以通过 jQuery 实现。为相关按钮设置一个 ID 并调用：

$("#button_id").click();
于 2019-08-04T08:29:22.583 回答