Question

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

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

<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;
});

}）;

Answer 1

我有同样的问题。我发现的唯一解决方案是模拟页面加载后针对该特定选择的按钮单击。 jQuery可以做到这一点。设置相关按钮的ID并致电：

$("#button_id").click();

JQuery同位素组合过滤器 - 预选

1 个答案: