Question

好的，我正在使用流沙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新手所以如果答案显而易见，请原谅我。

Answer 1

你的最后一行应该是：

$filteredPortfolio.addClass("row3");

.find（）是alrady生成一个jQuery对象，因此不需要额外的$（）

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

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

1 个答案: