在 Wordpress 主题中向 jquery-isotope 添加过滤

Question

我在 Wordpress 中使用 Vitrux 主题，该主题使用 Isotope jQuery plugin 来显示作品集。 Isotope 允许使用类别对项目进行排序，但在主题中，一次只能按一个类别排序（例如，“年份”或“类型”，而不是“年份”和“类型”。

你可以在这里看到一个模型：http://snaprockandpop.samcampsall.co.uk/shoots/

附加到每个类别项的 jQuery 用于对帖子进行排序，如下所示：

function (){
                  var selector = $(this).attr('data-filter');
                  $container_isotope.isotope({ filter: selector });
                  var $parent = $(this).parents(".filter_list");
                  $parent.find(".active").removeClass('active');
                  $(".filter_list").not($parent).find("li").removeClass('active').first().addClass("active");
                  $(this).parent().addClass("active");
                  return false;
                }

我可以从 Isotope 网站看到可以使用多个过滤器，我在这里找到了作者的注释：http://jsfiddle.net/desandro/pJ6W8/31/

编辑： 编辑主题文件允许我为过滤器列表分配适当的类和属性（您可以在页面源代码中看到这些），并且我通过 jsfiddle 的编辑版本来定位它们以反映主题样式中的类和 id ：

$( function() {
var $container = $('#portfolio_container');

    $container.isotope({

      animationOptions: { duration: 300, easing: 'linear', queue: false },
      getSortData : {
      year : function ( $elem ) { return parseFloat( $elem.find('._year').text() ); },
      live-shows : function ( $elem ) { return parseFloat( $elem.find('._live-shows').text() ); }
      }
    });

var filters = {};
$('.ql_filter a').click(function(){

var $this = $(this);
 if ( $this.hasClass('selected') ) {
    return;
  }
  var $optionSet = $this.parents('.filter_list');
  $optionSet.find('.active').removeClass('active');
  $this.addClass('active');

  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter');

  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }

  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });
  return false;
  });
});

两件（相当重要的）事情：

1) 我不是 100% 正确地编辑了这个。尽管 Rich 的 cmets 非常出色，但我仍然无法理解。我特别不清楚如何设置“getSortData”部分 - 我认为这是正确的，但任何输入都会很棒。

2) 我不确定这个 JavaScript 是否正在启动。目前我已经将它放在结束 head 标签之前，但页面上的检查表明上面概述的原始脚本是在过滤器项目上运行的脚本。

在这个阶段的任何指针都会很棒！

Answer 1

我明白你的意思。您正在寻找两个过滤器的交集，而不是互斥的过滤器值。

简答：联系主题供应商，看看他们是否可以为您制作交集过滤器。

更长的帮助（不是答案）：

您的最终目标是让 Vitrux 主题以您想要的方式运行。
您的首要目标是了解 jsfiddle 代码在做什么。
我可以通过解释代码来处理您的第一个目标。

// hook into the JQuery Document Load event and run an anonymous function
$( function() {

    // Create a variable called container
    // make container refer to the element with ID Container
    var $container = $('#container');

        // initialize isotope
        // Call the isotope method on the container element

        $container.isotope({

          // options...
          //distracting options

          animationOptions: { duration: 300, easing: 'linear', queue: false },
          getSortData : {
          price : function ( $elem ) { return parseFloat( $elem.find('.price').text() ); },
          size : function ( $elem ) { return parseFloat( $elem.find('.size').text() ); }
          }
        });

    // sorting button

    //for the anchor tag that has a class of 'pricelow', wire up an anonymous function to the click event

    $('a.pricelow').click(function(){

     //Rerun the isotope method when it is clicked, pass an array of options as a parameter
      $('#container').isotope({ sortBy : 'price',sortAscending : true });
     //return false for the anonymous function.  Not 100% sure why this is necessary but it has bitten me before
      return false;
    });

  //removed the rest of the click methods, because it does the same thing with different params

  //Here is what you are interested in understanding
  //Create an empty filters object
  var filters = {};

    // filter buttons
    //When an anchor tag with class filters is clicked, run our anonymous function
    $('.filters a').click(function(){

      //Create a variable that is the action anchor element
      var $this = $(this);
      // don't proceed if already selected by checking if a class of "selected" has already been applied to the anchor
      if ( $this.hasClass('selected') ) {
        return;
      }

      //Create an optionSet Variable, point it to the anchor's parent's class of "option-set"
      var $optionSet = $this.parents('.option-set');
      // change selected class
      //Inside the optionSet, find elements that match the "selected" class and then remove the "selected class"
      $optionSet.find('.selected').removeClass('selected');
      // set this (the anchor element) class to "selected"
      $this.addClass('selected');

      // store filter value in object
      // create a variable called 'group' that points to the optionsSet variable and grab the data-filter-group expando attribute
      var group = $optionSet.attr('data-filter-group');
      //Append to the filters object at the top of this section and set the data-filter-group value to the anchor tag's data-filter value
      filters[ group ] = $this.attr('data-filter');


      //create an isoFilters array variable
      var isoFilters = [];

      //Loop through each one of the items in filters (give the item an alias variable called 'prop'
      for ( var prop in filters ) {
      //push the prop into the isoFilters array (the opposite is pop)
        isoFilters.push( filters[ prop ] )
      //keep looping until there are no more items in the object
      }
      //create a variable called selector and turn the array into a string by joining all of the arrays together
      var selector = isoFilters.join('');
      //Like always, call the 'isotope' method of the 'container' element and pass our newly concatenated 'selector' string as the 'filter' option.
      $container.isotope({ filter: selector });
      //return false for some reason (maybe someone can expand on that)
      return false;
    });

});

接下来是您的最终目标，即修改 Vitrux 主题以处理交叉过滤器。

这有点棘手，因为

1. 您已从 PHP 自动生成标签以创建类别链接和年份过滤器。因此，肯定会有一些 PHP 代码更改。
2. 您必须转换 jsfiddle 代码来处理您的 PHP 更改

Answer 2

尝试使用 jQuery noconflict。实际上，将任何“$”替换为“jQuery”，看看它是否有效。

Wordpress 不能很好地处理美元符号。