Как использовать тумблер с изотопом?

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/