Question

我正在尝试使用两个元素进行过滤工作并进行搜索。

我只有一个元素可以工作..

$('#filters').on( 'click', 'a.filter', function() {
        buttonFilter = $( this ).attr('data-filter');
        $container.isotope({
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });

  $('.slidein').each( function( i, slidein ) {
    var $slidein = $( slidein );
    $slidein.on( 'click', 'a.filter', function() {
      $slidein.find('.active').removeClass('active');
      $( this ).addClass('active');
    });
  });

你可以在这里看到我的意思。有人怎么知道解决它？

搜索过滤工作。

http://jsfiddle.net/8xh4F/

Answer 1

$("#filters")仅返回id "filters"的第一个元素。使用$(".slidein")返回两个元素并且效果很好。

这是小提琴：http://jsfiddle.net/8xh4F/1/

//Use $(".slidein") !!
$('.slidein').on( 'click', 'a.filter', function() {
    buttonFilter = $( this ).attr('data-filter');
    $container.isotope({
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
     });
     return false;
});

如果您想为每个.slidein元素使用不同的过滤器，请为每个id元素使用不同的.slidein，并使用两个不同的buttonFilter变量。< / p>

这是小提琴：http://jsfiddle.net/8xh4F/3/

var buttonFilter1 = "*", buttonFilter2 = "*"; //Use _two_ filters for _two_ different categories.

var $container = $('.portfolio-items').isotope({
  [...]
  filter: function() {
    [...]
    //Check both of the button filters.
    var buttonResult = $this.is( buttonFilter1 ) && $this.is( buttonFilter2 );
    [...]
  },
  [...]
});

[...]
$('#countries').on( 'click', 'a.filter', function() {
    //For the first filter, set buttonFilter1.
    buttonFilter1 = $( this ).attr('data-filter');
    $container.isotope({
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
     });
     return false;
});

$('#nums').on( 'click', 'a.filter', function() {
    //For the second filter, set buttonFilter2.
    buttonFilter2 = $( this ).attr('data-filter');
    $container.isotope({
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
     });
     return false;
});

同位素+搜索+过滤有两个部分

1 个答案: