0

jQuery Isotope を使用して製品写真をフィルタリングしています。選択ボックスを使用するように例を変更する必要がありましたが、これはうまく機能しますが、複数のフィルター属性を持つ例からコードを変更する必要があります。

これは動作するコード例です:

   $(function(){

    var $container = $('#container'),
        filters = {};

    $container.isotope({
      itemSelector : '.color-shape',
      masonry: {
        columnWidth: 80
      }
    });

    // filter buttons
    $('.filter a').click(function(){
      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;
    });
});

そして、これが機能しない私のコードです。

$(function() {

    var $container = $('#productsContainer'),
        filters = {};
    $container.isotope({
        itemSelector: '.item'
    });
    $('.filter select').change(function() {
        var $this = $(this),
            $optionSet = $this.parents('.option-set'),
            $container = $('#productsContainer');
        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;
    });
});

追加されている isoFilters 配列アイテムまで追跡しましたが、それらは空です。何が問題なのかわかりません。

この行を置き換えると、コードが機能します。

    var selector = isoFilters.join('');

これとともに：

        var selector = $("option:selected",this).attr("data-filter-value");

ただし、両方のグループでフィルタリングすることはできません。1 つのみです。

助けを期待して、私はこれについて頭を悩ませています。

ありがとう。

4

1 に答える 1

0

私は何が起こっているのかを理解しました。この行は、選択ボックスから適切な属性を選択していませんでした。

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

これを次のように変更する必要がありました。

filters[ group ] = $("option:selected",this).attr('data-filter-value');
于 2011-10-11T19:49:34.340 に答える