組合過濾器Jquery同位素

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> 

同位素網站

Answer 1

從Pixelsmith的codepen開始，我換出了JS以匹配您發布的示例。 我相信這就是您想要的。 經過檢查的格式有些奇怪，但是功能在那里。

這是新的JS。 工作實例

$('.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;
}

Answer 2

JS中出現錯誤，導致該函數停止運行，然后在您的代碼中出現古怪的現象，似乎破壞了該函數。

在函數中，您需要將行$('#filters input').on('click', '.btn', function() {更改$('#filters').on('click', '.btn', function() { ，否則，您是在要求瀏覽器監視#filters div中的所有input s，以click .btn而這永遠不會發生。

其次，我無法使過濾器與您創建的標簽/無線電組合一起使用，但確實可以與按鈕一起使用。 您選擇單選按鈕是否有原因？ 如果是這樣，您將需要多使用一些代碼來實現它，並且您可能想擺脫click而使用attr（'checked'）代替。

工作碼筆

祝好運！