javascript - 如何显示元素并在单击另一个元素时隐藏

我有一系列的div元素，可以通过下面的代码触发。

$(".course_id").on("click", function(){
     var id = $(this).data("id");
     $("div#lessons_by_course_" + id).removeClass("hidden");
});

div的ID为lessons_by_course + id，例如

<div id="lessons_by_course1"></div>

使用rails .each循环上的ruby动态解析id号。

我想要的是当我单击一个div时要显示的内容，而当我单击另一个div时，我想要jquery隐藏显示的最后一个并显示我接下来单击的那个。

请注意，.course_id是一个包含许多元素的类，因此，每次单击某个特定元素时，都会弹出一个不同的div，因为id每次都不同。

最佳答案

您可以将最后显示的元素的ID缓存在全局变量中：

var id;

然后在您的循环中：

$(".course_id").on("click", function(){
    if(id) {
        $("div#lessons_by_course_" + id).addClass("hidden");
    }
    id = $(this).id;
    $(this).removeClass("hidden");
});