0

问题：Javascript 代码和过滤功能不起作用。我的 Javascript 中有什么不正确的地方？

我正在基于 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>

谢谢您的帮助！

4

2 回答 2

1

见http://jsfiddle.net/desandro/pJ6W8/31/

  1. 里面少了一个逗号getSortData。

  2. 你的 JS 不见了var filters = {}。如果没有此语句，您将使用浏览器作为元素提供的全局filters变量。#filters

  3. 更改filters[ group ] = $this.attr('data-filter-value');为 filters[ group ] = $this.attr('data-filter');` 以匹配您的 HTML

  4. 添加,sortAscending : true了排序点击事件所需的位置。

于 2013-01-16T13:23:33.660 回答
0

很棒的输入！我想对这个讨论做的一个补充是记住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;
  }
于 2013-08-21T07:09:31.937 回答