Javascript 如何使用js切换html元素可见性

我有一个映射（由svg元素组成），它在启动时如下所示

当用户单击“区域”时，我希望发生两件事。一次只能单击一个区域

分区接收“活动”类标记，因此样式将更改以表示选定状态

该分区的标记将变为可见

然后，用户可以单击该区域中的“标记”，该区域应用了以下“活动”标记，因此用户也可以选择该标记。一次只能选择一个标记

* {
背景：rgb（40,40,40）；
}
.区域{
填充：rgba（255255,0.25）；
行程：rgba（255255,0.25）；
笔画宽度：1；
光标：手；
}
.马克{
填充：rgba（255,0,0,1.0）；
行程：rgb（255255）；
笔画宽度：0；
光标：十字线；
}
.活动区{
行程：rgba（255255,1.0）；
填充：rgba（255,0,0,0.25）；
}
.活动标记{
行程：rgb（255255）；
笔画宽度：1；
}

JQuery有一个切换功能来解决您的问题：

.toggle()

---

我希望这有帮助；）

创建这个问题的答案很有趣，我从未使用过SVG

jQuery无法将

.addClass（）

应用于路径元素，因此在我的原始回答中没有任何效果-我单击了，但没有更改样式。解决这个问题的方法是使用

.attr（）

，这就是为什么您会在答案中看到这一点。我添加了一个类，

.marker visible

，这样我可以1）区分显示哪些标记，2）实际显示标记。每个区域和标记都有一个

数据区域

属性，告诉javascript正在单击哪个区域以及哪些标记是该区域的一部分

我为

document.ready（）

中的区域创建了一个单击处理程序，单击处理程序所做的就是重置所有区域上的类（使它们看起来未被单击），并将

区域活动类添加到单击的区域中。然后通过查找具有相同
数据区域
标记的所有标记来显示区域中的所有标记

我使用了
$（document）.on（'click'，'.marker-visible'）
而不是
$（'.marker-visible'）。click（）
是因为标记会动态分配
marker-visible
类，所以我不能动态分配click处理程序（我可以，但这不是最好的）。相反，我将其分配给文档，使其始终运行，并且在运行时不需要分配和删除单击处理程序。单击处理程序的作用实际上与区域单击处理程序的作用相同，因为它只是重置所有其他可见标记的类，并将
标记设置为活动的
类

如果需要进一步澄清，请发表评论


$（文档）.ready（函数（）{
$（'.zone'）。单击（函数（）{
$（'.zone'）.attr（'class'，'zone'）；
$（'.marker'）.attr（'class'，'marker'）；
$（this.attr（'class'，'zone active'）；
$（'.marker[data zone=“'+$（this）.data（'zone'）+'“]'））.attr（'class'，'marker-marker-visible'）；
});
$（文档）。在（'单击'，'上。标记可见'，函数（）{
$（'.marker-visible'）.attr（'class'，'marker-visible'）；
$（this.attr（'class'，'marker-visible-marker-active'）；
});
});

* {
背景：rgb（40,40,40）；
}
.区域{
填充：rgba（255255,0.25）；
行程：rgba（255255,0.25）；
笔画宽度：1；
光标：指针；
}
.马克{
填充：rgba（255,0,0,1.0）；
行程：rgb（255255）；
笔画宽度：0；
光标：十字线；
显示：无；
}
.区域活动{
行程：rgba（255255,1.0）；
填充：rgba（255,0,0,0.25）；
}
.标记可见{
显示：块；
}
.标记激活{
行程：rgb（255255）；
笔画宽度：1；
}
请添加您尝试过的JavaScript。如果你没有，考虑复习：哇，你打败了我，我回来后发布我的JS代码，因为我已经取得了一些进展，但是我不知道你在哪里。非常感谢。这就是我创建堆栈溢出帐户的原因；）我浏览了你的代码，你以一种非常清晰易懂的方式开发了它，也很容易阅读。非常感谢。