Question

我一直试图让同位素过滤工作..我是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;
  });

}）;

Answer 1

你现在的选择器变量只返回一个字符串......而不是一个选择器。易于修复。只需将它包装在parens中并添加$：

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

Jquery Isotope和wordpress，过滤麻烦

1 个答案: