1

http://shoeshinedesign.com/css/portfolio/でポートフォリオを動的にソートしています

最初にリストされたプロジェクトには、「todd-ao」と「soundelux」の 2 つのカテゴリがあります。上のフィルター ボタンは、jQuery を使用してプロジェクトを並べ替え、フィルター ボタンのクラスと特定のプロジェクトのliクラスを接続します。data-type

フィルター ボタンは 1 つのクラスでマークされているため、data-typeパラメーターに 2 つのカテゴリがある場合は常に、jQuery スクリプトは .xml 内の特定の単語を認識しませんdata-type。

jQuery を変更して、複数の単語data-typeとボタンをそれに応じて並べ替えることができるようにする必要があります。

これが私のHTMLマークアップです：

<!-- FILTER BUTTONS -->
<ul class="portfoliofilter">
  <li class="all">
    <a href="#">All</a>
  </li>
  <li class="todd-ao">
    <a href="#">Todd-AO</a>
  </li>
  <li class="soundelux">
    <a href="#">Soundelux</a>
  </li>
</ul>

<!-- PROJECT LISTING -->

<ul id="portfoliolist3column"> 
  <li class="portfolio" data-type="todd-ao soundelux">
    <!-- 
        THIS PROJECT WON'T SORT DUE TO DATA-TYPE
        NOT SPECIFICALLY MATCHING FILTER LI CLASS
    -->
  </li>
  <li class="portfolio" data-type="todd-ao">
    <!-- SORTS -->
  </li>
  <li class="portfolio" data-type="soundelux">
    <!-- SORTS -->
  </li>
</ul>

jQuery マークアップ:else (条件付きのフォーカス)

jQuery('.portfoliofilter li').click(function(e) {
  jQuery(".portfoliofilter li a").addClass("portfoliobutton_noselect");
  jQuery(".portfoliofilter li a").removeClass("portfoliobutton");   
  jQuery(this).children('a').removeClass("portfoliobutton_noselect");
  jQuery(this).children('a').addClass("portfoliobutton");

  var filterClass = jQuery(this).attr('class');

  if (filterClass == 'all') {
    var $filteredData = $data.find('.portfolio');
  } else {
    var $filteredData = $data.find('.portfolio[data-type=' + filterClass + ']');
  }

  jQuery($list).quicksand($filteredData, {
    duration: 500,
    easing: 'swing',
    adjustHeight: 'dynamic',
    enhancement: function() { }
  }, function() {
    addPrettyPhoto();
  });

  return false;
});

$data.findと完全に一致するのではなく、単純に文字列を検索する方法はありfilterClassますか?


編集
これは、以下の@pimvdbによって提供される最終的なコンテキスト内コードです。

jQuery('.portfoliofilter li').click(function(e) {

            jQuery(".portfoliofilter li a").addClass("portfoliobutton_noselect");
            jQuery(".portfoliofilter li a").removeClass("portfoliobutton"); 
            jQuery(this).children('a').removeClass("portfoliobutton_noselect");
            jQuery(this).children('a').addClass("portfoliobutton");

            var filterClass = jQuery(this).attr('class');

            if (filterClass == 'all') {
                var $filteredData = $data.find('.portfolio');
            } else {
                var $filteredData = $data.find(".portfolio").filter(function() {
                    return ~jQuery(this).data("type").split(" ").indexOf(filterClass);
                  });
            }

            jQuery($list).quicksand($filteredData, {
                duration: 500,
                easing: 'swing',
                adjustHeight: 'dynamic',
                enhancement: function() {

                }
            }, function(){
                addPrettyPhoto();
            });

            return false;
        });
4

1 に答える 1

0

関数を渡し.findて項目を分割できdata-ます: http://jsfiddle.net/mXbGJ/。これはアイデアの例であり、あなたのケースの正確な実装ではありませんが、コードに貼り付けるのは簡単だと思います:

$("...").find(function() {
    return ~$(this).data("items").split(" ").indexOf("b");
}).css("background-color", "red");

編集：これは私が思う正しいものを記録します：

jQuery('.portfoliofilter li').click(function() {
  var x = jQuery(this).attr("class");
  console.log($("#portfoliolist3column").find(".portfolio").filter(function() {
    return ~jQuery(this).data("type").split(" ").indexOf(x);
  }));
});
于 2012-05-30T18:29:17.323 に答える