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');HTML に一致するように、filters[ group ] = $this.attr('data-filter');` に変更しました

  4. ,sortAscending : trueソート クリック イベントに必要な場所に追加されました。

于 2013-01-16T13:23:33.660 に答える
0

ファンタスティックインプット！この議論に付け加えたいことの 1 つは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 に答える