好的,我正在使用流沙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新手所以如果答案显而易见,请原谅我。
答案 0 :(得分:1)
你的最后一行应该是:
$filteredPortfolio.addClass("row3");
.find()是alrady生成一个jQuery对象,因此不需要额外的$()
您正在对[data-type=..]
进行过滤,如果在HTML中定义了数据类型属性,这很好,但如果您通过.data('type',val)jQuery进行设置则无效API。要使过滤器找到它,必须使用.attr('data-type',val)。较新版本的jQuery可以更好地区分数据和属性,这些实际上是独立的东西。 jQuery用于混合它们并且可以互换使用它们可能在旧版本中有效。