>> JSFIDDLE <<
var imgFilterBtn = $("nav > ul > li > ul > li > a");
$("img").fadeIn("slow");
imgFilterBtn.click(function() {
var fadeInClass = $(this).attr("id");
var wrongFilter = $(this).parent("li").parent("ul").children("li").children("a");
wrongFilter.removeClass(); // un-style all links in one sub-list
$(this).toggleClass("selected"); // style selected link
var wrongFilterID = wrongFilter.attr("id");
$("#imgWrap").removeClass(wrongFilterID); // remove all classes from imgWrap that are equal to an ID all LI-items in the current list
$("#imgWrap").toggleClass(fadeInClass); // toggle the class that is equal to the ID of the clicked a-element
$("img").hide(); // hide all images
var imgWrapClass = $("#imgWrap").attr("class");
$("#imgWrap").children("img." + imgWrapClass).fadeIn("fast"); // fade in all elements that have the same class as imgWrap
});
我已尽我所能包含解释脚本正在做什么的注释。
1. 什么有效:
- 图像在文档加载时淡入
- “选定”类已切换(但未切换回来!)
- 课程
#imgWrap
已切换,但不会切换回来 - 图像被隐藏并在单击列表项(实际上是其父项
li
)时显示
2. 什么不起作用
- 单击 li-item 时,其他类不会被删除
- 上面提到的事情
3. 应该发生什么
当用户点击一个链接时,该链接的 ID 被传递给分配给的类#imgWrap
。但是在分配这个类之前,与相同列表的其他列表项的 ID 相同的所有其他类(因此不是另一个列表)被删除。所以,当你点击black
和fashion
,然后brown
#imgWrap
应该有类fashion
和brown
,并且black
应该已经被删除了。
我猜我缺少一个each
功能,但我不确定。