2

>> 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功能，但我不确定。

4

1 回答 1

2

问题似乎是wrongFilter包含该特定列表的所有 a元素，并且wrongFilter.attr("id")将始终选择第一个选定元素的 ID 。

关于切换：如果您选择已选择的元素，则首先删除selected该类，然后再次添加它。类似于添加到的类#imgWrap。

将选择限制为实际选择的元素并修复类添加/删除：

// ...
// Only get the currently selected element
var wrongFilter = $(this).closest('ul').find('a.selected');
var wrongFilterID = wrongFilter.attr("id"); // get its ID

// toggle `selected` for the previous selected element and the current one;
// will remove the class if the previous selected element is the same as the
// current one 
wrongFilter.add(this).toggleClass('selected');

// ...

// if the class already exists, the same menu entry was clicked and we have 
// to remove the class
$("#imgWrap").toggleClass(fadeInClass, wrongFilterID !== fadeInClass);

// ...

但现在可能是这样wrongFilterID，undefined下一次调用removeClass将删除所有类 form #imgWrap。所以你必须添加一个测试：

if(wrongFilterID) {
    $("#imgWrap").removeClass(wrongFilterID); 
}

另一个问题是它imgWrapClass可以是一个以空格分隔的类字符串，例如"fashion black"，这意味着

.children("img." + imgWrapClass)

将导致

.children("img.fashion black")

这不是你想要的。

您必须从该字符串创建一个适当的选择器，例如：

// "fashion black" becomes "fashion.black"
var imgWrapClass = $.trim($("#imgWrap").attr("class")).replace(/\s+/g, '.');

修复所有这些后，它似乎可以正常工作：

演示

于 2012-07-09T16:27:27.223 回答