1

我一直在尝试让同位素过滤工作..我是 jquery/javascript 的新手，但想在客户网站上让同位素工作..我一直在堆栈和互联网上寻找我做错或丢失的事情..我是在 wordpress 主题中也使用它，并认为这可能是我的问题的一部分，但是在遵循每个教程和示例之后，我发现我认为这是我的一个小小的疏忽

这是我的 jsfiddle .. http://jsfiddle.net/CNj95/1/

Heres过滤器UL

<ul id="filters" class="option-set clearfix" data-option-key="filter">
  <li><a href="#" data-option-value=".category-instagram">instagram</a></li>
  <li><a href="#" data-option-value=".category-tweets">tweets</a></li>
  <li><a href="#" data-option-value=".category-facebook">facebook</a></li>
  <li><a href="#" data-option-value=".category-youtube">youtube</a></li>
</ul>

以下是要过滤的项目示例

<div id="content">
  <div class="category-tweets boxy"><div class="soc-label" ></div>
      <a href="" rel="prettyphoto"  title="" ></a>                      
       <p>CONTENT</p>
  </div>

  <div class="category-instagram boxy"><div class="soc-label" ></div>   
      <a href="" ><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" /></a>                     
       <p>CONTENT</p>
  </div>
</div>

原样的jQuery 

jQuery(document).ready(function () {
  var mycontainer = jQuery('#content');
  mycontainer.isotope({
      itemSelector: '.boxy'
  });

  // filter items when filter link is clicked
  jQuery('#options a').click(function (event) {
      var selector = jQuery(this).attr('data-option-value');
      mycontainer.isotope({
          filter: selector
      });
      return false;
  });

});

4

1 回答 1

0

您现在的选择器变量只返回一个字符串......而不是选择器。易于修复。只需将其包裹在括号中并在前面加上 $：

jQuery('#options a').click(function (event) {
  var selector = jQuery(this).attr('data-option-value');
  mycontainer.isotope({
      filter: $(selector)
  });
  return false;
  });
于 2013-03-08T15:50:46.287 回答