javascript - 显示具有公共(public) ID 的元素，隐藏其他元素

Question

我正在尝试创建一个系统，当选择一个元素时，显示相同 ID 的元素，同时隐藏前一个元素，而不隐藏该 ID 的所有实例(即，仅当存在某个类时才隐藏) 。第一部分(使元素“事件”并设置 ID 变量)工作正常，但我似乎无法停止使用“.hidden”类设置辅助元素。

我在这部分使用的代码是

function showSelect() {
    select = $(".active").attr('id');
        $(".items").addClass("hidden");
        $("#"+select).removeClass("hidden");
}

我尝试在第四行使用 $(select).remove... 以及当前存在的内容，但无济于事。其余代码可以在 http://jsfiddle.net/ActualRealJamz/2JZA6/ 上找到

我不确定我在这里做错了什么，并且 JSHint 没有报告任何类型的语法错误 - 所以我的方法一定有错误。如果这确实有用，Chrome 会在 $(".items").addClass("hidden"); 行报告“意外标识符”。

非常感谢您在此事上的任何帮助。

Answer 1

正如 Barmar 在评论中指出的那样，这从根本上是行不通的，因为你不能在多个元素上拥有相同的 id。如果这样做，则该文档无效，并且浏览器可以随意忽略 id 值。 (实际上，它们通常表现得好像只有文档中具有给定 id 值的第一个元素具有该 id，而忽略后续元素。)

您似乎在相关元素上使用类items，因此可以直接执行您想要执行的操作。假设 showSelect 作为 click 处理程序附加到相关元素，在 showSelect 内，this 将是特定元素被点击了。所以:

// Hooking it up
$(".items").click(showSelect);

// The function
function showSelect() {
    $(".items").not(this).addClass("hidden");
    $(this).removeClass("hidden");
}

根本不需要 id。