Question

我有一个中间，左侧和右侧位置的开关。每次单击切换按钮时，它都会更改变量'pos'。我还附上了同位素网格。我想这样做，以便我可以使用切换按钮过滤网格。我希望中间位置过滤所有（pos == 1或3），左侧位置（pos == 2）过滤红色，右侧位置过滤蓝色（pos == 4）。

的jQuery

//Toggle
var pos = 1;

$('.toggle').click(function(){
    if(pos === 1){
        $('.button').css('left', '0');
    }else if(pos === 2){
        $('.button').css('left', '75px');
    }else if(pos === 3){
        $('.button').css('left', '150px');
    }else if(pos === 4){
        $('.button').css('left', '75px');
        pos = 0;
    }
    pos++;
});



//Isotope Controls
  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.color-shape'
  });

  // store filter for each group
  var filters = {};

  $('.filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });


// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

https://jsfiddle.net/cjymyzg6/4/

Answer 1

解决

的jQuery

var pos = 1;

$('.toggle').click(function(){
    if(pos === 1){
        $('.button').css('left', '0');
        $grid.isotope({ filter: '.red' }); 
    }else if(pos === 2){
        $('.button').css('left', '75px');
        $grid.isotope({ filter: '' }); 
    }else if(pos === 3){
        $('.button').css('left', '150px');
        $grid.isotope({ filter: '.blue' }); 
    }else if(pos === 4){
        $('.button').css('left', '75px');
        $grid.isotope({ filter: '' }); 
        pos = 0;
    }
    pos++;
});

https://jsfiddle.net/cjymyzg6/6/

如何使用同位素切换开关？

1 个答案: