Question

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

你可以在这里看到一个模型：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的评论非常出色，但我仍然不能深入。我特别不清楚如何设置'getSortData'部分 - 我认为这是正确的，但任何输入都会很棒。

2）我不确定这个JavaScript是否正在启动。目前我已将它放在关闭头标记之前，但是页面上的检查表明上面列出的原始脚本是在过滤器项目上运行的脚本。

这个阶段的任何指针都太棒了！

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主题以处理交叉过滤器。

这有点棘手，因为

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

Answer 2

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

Wordpress与美元符号不相符。

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

2 个答案: