Question

我正在尝试组合此示例中的过滤器：http://codepen.io/desandro/pen/JEojz/?editors=101但我无法做到。

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

HTML：

＆＃13;

<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>

＆＃13;

Isotope website

Answer 1

从Pixelsmith的codepen开始，我换掉了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;
}

Answer 2

你的JS中有一个错误就是停止运行该函数，然后你的代码中的怪癖似乎打破了这个功能。

在功能中，您需要将行$('#filters input').on('click', '.btn', function() {更改为$('#filters').on('click', '.btn', function() {，否则您要求浏览器观看input div中的所有#filters个click .btn click，这将永远不会发生。

其次，我无法使用您创建的标签/收音机组合使用过滤器，但我确实使用了按钮。你有没有选择单选按钮的原因？如果是这样，您需要更多地使用代码来实现它，并且您可能希望远离x <- c("a", "k", "n") Reduce(union, lapply(x, function(a) which(rowSums(df == a) > 0))) # [1] 1 5 2并使用attr('checked')代替。

Working Codepen

祝你好运！

组合过滤器Jquery Isotope

2 个答案: