Question

我正在使用Isotope显示设计项目缩略图的图像网格，按照我的主页上的产品类别（生活方式，汽车配件，电子产品等）进行排序。我正在使用<li>项来过滤缩略图。

我希望这些<li>项目能够作为我网站每个其他页面的主页超链接，并在点击时预先过滤主页同位素网格。

我查了this answer和this one，但没有一个能为我工作。可以有人帮忙吗？

这是我到目前为止（改编自上面的第一个链接）：

JS：

var $container = $('.grid');

$container.isotope({
// options
isInitLayout: true,
});

    // filter items on button click
    $('#filter').on( 'click', 'li', function() {
      var filterValue = $(this).attr('data-filter');
      $container.isotope({ filter: filterValue });
    });

  // change is-checked class on buttons
  $('#filter').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'li', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
});

var filterFromQuerystring = getParameterByName('filter');
$('#filter li a[data-filter=".' + filterFromQuerystring  + '"]').click();

    });

});

如主页上所示过滤导航：

<ul id="filter">
  <li class="is-checked" data-filter="*">All</li>
  <li data-filter=".lifestyle">Lifestyle</li>
  <li data-filter=".car">Car accessories</li>
  <li data-filter=".lighting">Lighting</li>
  <li data-filter=".digital">Digital</li>
  <li data-filter=".bnc">Beauty & Care</li>
  <li data-filter=".equipment">Equipment</li>
</ul>

按照主页上的任何页面显示过滤导航：

<ul id="filter">
  <li><a href="index.html" data-filter="*">All</a></li>
  <li><a href="index.html?filter=lifestyle" data-filter=".lifestyle">Lifestyle</a></li>
  <li><a href="index.html?filter=car" data-filter=".car">Car accessories</a></li>
  <li><a href="index.html?filter=lighting" data-filter=".lighting">Lighting</a></li>
  <li><a href="index.html?filter=digital" data-filter=".digital">Digital</a></li>
  <li><a href="index.html?filter=bnc" data-filter=".bnc">Beauty & Care</a></li>
  <li><a href="index.html?filter=equipment" data-filter=".equipment">Equipment</a></li>
</ul>

主页上显示的图片网格：

<ul class="grid">
  <li class="lifestyle"><a href="gallery1.html"><img src="images/thumbs/1.jpg" /></a></li>
  <li class="lifestyle"><a href="gallery2"><img src="images/thumbs/2.jpg" /></a></li>
  <li class="lighting"><a href="gallery3.html"><img src="images/thumbs/3.jpg" /></a></li>
[...]
</ul>

我希望一切都有意义，期待您的回复！

谢谢！

由另一页面中的链接触发的同位素预过滤

0 个答案: