与同班的父亲，这是相同的列表项的ID

Question

>>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类翻转（但不BACK切换！） ，但不会回拨
• 图像被隐藏并显示何时列表项（实际上是其父项li）被点击

---

2.什么不起作用

• 当单击李项，其他类不被删除上述

---

提到

事

3.应该怎么办 当用户点击链接时，链接的ID将被传递给分配给#imgWrap的类。但在分配此类之前，所有其他类与“同类列表”的其他列表项的标识相同的其他类（不包含另一列表）将被删除。因此，当您点击black和fashion，然后brown#imgWrap应具有类别fashion和brown,black应已被删除。

我猜我错过了each函数，但我不确定。

Answer 1

这个问题似乎是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下一次调用将删除所有类构成#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, '.'); 

---

与所有的固定，它似乎正常工作：

DEMO