1

我在http://shoeshinedesign.com/css/portfolio/上动态地整理投资组合

第一个列出的项目有两个类别：“todd-ao”和“soundelux”。顶部的过滤器按钮通过 jQuery 对项目进行排序，连接li过滤器按钮的类和data-type特定项目的类。

由于过滤器按钮由一个类标记，每当我在data-type参数中有两个类别时，jQuery 脚本就无法识别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 回答