Объединение фильтров JQuery Isotope

Question

Я пытаюсь объединить фильтры, подобные этому примеру: http://codepen.io/desandro/pen/JEojz/?editors=101, но я не могу.

Codepen: http://codepen.io/anon/pen/gpbypp

HTML:

<div id="filters"> 
 
    <label class="pull-left">Seats: </label> 
 

 
    <div class="btn-group" data-toggle="buttons" data-filter-group="seats"> 
 
    <label class="btn btn-default active"> 
 
     <input type="radio" data-filter="*">All 
 
    </label> 
 
    <label class="btn btn-default"> 
 
     <input type="radio" data-filter=".seats-4">4 
 
    </label> 
 
    <label class="btn btn-default"> 
 
     <input type="radio" data-filter=".seats-5">5 
 
    </label> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 

 
    <label class="pull-left">Transmission: </label> 
 

 
    <div class="btn-group" data-toggle="buttons" data-filter-group="transmission"> 
 
    <label class="btn btn-default"> 
 
     <input type="radio" data-filter=".manual">Manual 
 
    </label> 
 
    <label class="btn btn-default"> 
 
     <input type="radio" data-filter=".auto">Auto 
 
    </label> 
 
    </div> 
 
</div> 
 

 
<div id="isotope-container"> 
 
    <div class="col-sm-3 item seats-5 auto"> 
 
    <h3>Volkswagen Polo</h3> 
 
    <p>5 seats auto</p> 
 
    </div> 
 
    <div class="col-sm-3 item seats-4 auto"> 
 
    <h3>Suzuki Jimny</h3> 
 
    <p>4 seats auto</p> 
 
    </div> 
 
    <div class="col-sm-3 item seats-4 manual"> 
 
    <h3>Volkswagen Caddy</h3> 
 
    <p>4 seats manual</p> 
 
    </div> 
 
    <div class="col-sm-3 item seats-5 manual"> 
 
    <h3>Opel Zafira</h3> 
 
    <p>5 seats manual</p> 
 
    </div> 
 
</div> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Isotope website

Answer 1

Там есть ошибка в вашем JS, что останавливает функцию от бега, а затем причуды в коде которые, похоже, нарушают функцию.

В функции вам нужно изменить строку $('#filters input').on('click', '.btn', function() { к $('#filters').on('click', '.btn', function() {, в противном случае вы просите браузер смотреть все input сек в #filters DIV для click на .btn и что никогда не будет происходить.

Во-вторых, я не мог заставить фильтры работать с созданной вами комбинацией меток/радио, но я получил ее для работы с кнопками. Есть ли причина, по которой вы выбираете радиокнопки? Если это так, вам нужно будет работать с кодом немного больше, чтобы это произошло, и вы можете отказаться от click и вместо этого использовать attr('checked').

Working Codepen

Успехов!

Answer 2

Начиная с codepen от Pixelsmith, я поменял JS, чтобы соответствовать примеру, который вы опубликовали. Я считаю, что это то, что вы искали. Проверенное форматирование немного неудобно, но функциональность есть.

Это новый JS. Working example

$('.filters').on('click', '.btn', function() { 
var $this = $(this); 

var $buttonGroup = $this.parents('.btn-group'); 
var filterGroup = $buttonGroup.attr('data-filter-group'); 
// set filter for group 
filters[ filterGroup ] = $this.attr('data-filter'); 

var filterValue = concatValues(filters); 
$container.isotope({ filter: filterValue }); 
}); 

// change is-checked class on buttons 
$('.btn-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; 
}