组合过滤器 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

从 Pixelsmith 的 codepen 开始，我换掉了 JS 以匹配您发布的示例。我相信这就是你要找的。 is-checked 格式有点不稳定，但功能在那里。

这是新的 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;
}

Answer 2

您的 JS 中有一个错误导致该函数停止运行，然后您的代码中出现了似乎破坏该函数的怪癖。

在函数中，您需要将$('#filters input').on('click', '.btn', function() { 行更改为$('#filters').on('click', '.btn', function() {，否则您要求浏览器查看#filters div 中的所有inputs，以获取click 上的.btn 和这永远不会发生。

其次，我无法让过滤器与您创建的标签/收音机组合一起使用，但我确实让它与按钮一起使用。您选择单选按钮是否有原因？如果是这样，您将需要更多地使用代码来实现它，并且您可能希望远离 click 并改用 attr('checked')。

Working Codepen

祝你好运！