将特殊效果应用于所选滤镜

时间:2012-06-26 17:56:23

标签: javascript jquery

好的,我正在使用流沙jquery过滤器。现在我想在选择任何过滤器时为所有图像添加特定效果(我在javascript中键入)。筛选器列表如下: -

<ul class="filter"> 
   <li class="current all"><a href="#">Fred</a></li> 
   <li class="daisy"><a href="#">daisy</a></li> 
   <li class="richard"><a href="#">richard</a></li> 
   <li class="ama"><a href="#">ama</a></li> 
   <li class="santy"><a href="#">santy</a></li> 
   <li class="washington"><a href="#">washington</a></li> 
   <li class="deuces"><a href="#">deuces</a></li> 
</ul> 

所以我使用以下语法来确定所选的过滤器并使用一些jquery&#39; magic&#39;从那里。

    $(".filter a").click(function(e){

    $(".filter li").removeClass("current"); 

    // Get the class attribute value of the clicked link
    var $filterClass = $(this).parent().attr("class");

    if ( $filterClass == "all" ) {
        var $filteredPortfolio = $portfolioClone.find("li");
    } else {
        var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
        $filteredPortfolio.addClass("row3");
    }

现在要为所选滤镜的所有图像添加特殊效果(比如摄影),我添加了你在最后一行看到的代码$("$filteredPortfolio").addClass("row3"),因为效果适用于所有类的元素row3但是当我在浏览器中调试它时,它无法正常工作。我究竟做错了什么?我仍然认为自己是一个jquery新手所以如果答案显而易见,请原谅我。

1 个答案:

答案 0 :(得分:1)

你的最后一行应该是:

$filteredPortfolio.addClass("row3");

.find()是alrady生成一个jQuery对象,因此不需要额外的$()

您正在对[data-type=..]进行过滤,如果在HTML中定义了数据类型属性,这很好,但如果您通过.data('type',val)jQuery进行设置则无效API。要使过滤器找到它,必须使用.attr('data-type',val)。较新版本的jQuery可以更好地区分数据和属性,这些实际上是独立的东西。 jQuery用于混合它们并且可以互换使用它们可能在旧版本中有效。