Question

问题：Javascript代码和过滤无法正常运行。我的Javascript中哪些不正确？

我正在实施过滤＆amp;基于Isotope jQuery插件（http://isotope.metafizzy.co/index.html）对购物车产品的用户体验进行排序。该系统正在Shopify平台上实施（演示链接：http://cushionbrilliant.myshopify.com）。

在此链接（http://isotope.metafizzy.co/demos/combination-filters.html）中，Isotope的开发人员解释了如何通过传递组合的选择器来组合多个过滤器。做了一些研究我找到了实现它的代码，但是它运行不正常。

以下是示例代码的jsfiddle链接：http://jsfiddle.net/jeremyccrane/pJ6W8/22/

以下是我尝试使用的Javascript代码：

var $container = $('#container');
    // initialize isotope
    $container.isotope({
      // 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
$('a.pricelow').click(function(){
  $('#container').isotope({ sortBy : 'price' });
  return false;
});
$('a.pricehigh').click(function(){
  $('#container').isotope({ sortBy : 'price',sortAscending : false });
  return false;
});
$('a.sizelow').click(function(){
  $('#container').isotope({ sortBy : 'size' });
  return false;
});
$('a.sizehigh').click(function(){
  $('#container').isotope({ sortBy : 'size',sortAscending : false });
  return false;
});

// filter buttons
    $('.filters a').click(function(){
      //$(this).addClass('.selected');
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter-value');
      // convert object into array
      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });

以下是选择器的HTML代码：

<ul id="filters">
  <li><a href="#">Type</a>
        <ul data-filter-group="diamond" class="filters option-set">
      <li><a href="#" data-filter="*">Show All</a></li>
      <li><a href="#" data-filter=".One">One</a></li>
      <li><a href="#" data-filter=".Two">Two</a></li>
      <li><a href="#" data-filter=".Three">Three</a></li>
    </ul>
  </li>
  <li><a href="#">Price</a>
        <ul data-filter-group="price" class="filters option-set">
      <li><a href="#" data-filter="*">Show All</a></li>
      <li><a href="#" data-filter=".Under5k">Under $5k</a></li>
      <li><a href="#" data-filter=".Under10k">Under $10k</a></li>
      <li><a href="#" data-filter=".Over10k">Over $10k</a></li>
    </ul>
  </li>
</ul>
<ul id="sorting">
  <li><a href="#pricelow" class="pricelow">Price Low to High</a></li>
  <li><a href="#pricehigh" class="pricehigh">Price High to Low</a></li>
  <li><a href="#sizelow" class="sizelow">Size Low to High</a></li>
  <li><a href="#sizehigh" class="sizehigh">Size High to Low</a></li>
</ul>

以下是示例框的HTML代码：

<div id="container">
  <div class="box One Under5k">Box Category 1 <div class="price">2500</div><div class="size">1.5</div></div>
  <div class="box Two Under5k">Box Category 2 <div class="price">2500</div><div class="size">2.0</div></div>
  <div class="box Three Under5k">Box Category 3 <div class="price">2500</div><div class="size">2.5</div></div>
  <div class="box One Under10k">Box Category 1 <div class="price">7500</div><div class="size">3.0</div></div>
  <div class="box Two Under10k">Box Category 2 <div class="price">7500</div><div class="size">3.5</div></div>
  <div class="box Three Under10k">Box Category 3 <div class="price">7500</div><div class="size">4.0</div></div>
  <div class="box One Over10k">Box Category 1 <div class="price">12500</div><div class="size">4.5</div></div>
  <div class="box Two Over10k">Box Category 2 <div class="price">12500</div><div class="size">5.0</div></div>
  <div class="box Three Over10k">Box Category 3 <div class="price">12500</div><div class="size">5.5</div></div>
</div>

感谢您的帮助！

Answer 1

请参阅http://jsfiddle.net/desandro/pJ6W8/31/

getSortData内缺少逗号。
您的JS缺少var filters = {}。如果没有此声明，您将点击全局filters变量，浏览器将其作为#filters元素提供。
将filters[ group ] = $this.attr('data-filter-value');更改为过滤器[group] = $ this.attr（'data-filter'）;`以匹配您的HTML
添加,sortAscending : true排序点击事件所需的位置。

Answer 2

出色的输入！我想对此讨论做的另一个补充是记住点击事件event.preventDefault;。否则，当用户单击已处于活动状态的过滤器值时，您将重新加载页面。

$('.filters a').click(function(){
  event.preventDefault();
  //$(this).addClass('.selected');
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return;
  }

创建通过css传递多个选择器的过滤器

2 个答案: