jquery - 如何让一个元素响应另一个元素的点击？ - CSS/jQuery

Question

问题很简单，但在我的实现中出现了问题。

你可以看到我的实现here .

所以我想要发生的是，当您单击框 #1 中的其中一个名称时，虚线和虚线圆圈中的 #1 都变成黑色和实心。虚线不是边框。当您单击其他相应框中的任何其他数据时，也会发生同样的情况。

我面临的主要问题是，当我使用 jQuery 中的 .css 函数手动更改颜色和边框时，效果很好。但是，我想用 toggle 类修改它(因为我无法让 toggle() 与 css 函数一起工作)——这样当你点击它一次时，你会看到被点击的元素突出显示(带有 1px 边框——此功能已经存在)，并且框(和虚线)的相应编号变为纯黑色。

谢谢。

Answer 1

看起来 JavaScript 没问题。我唯一能看到把事情搞砸的是这一行:

$('#bc1 dashed-circle').toggleClass('bc-dashed-to-solid-circle');

您需要将该选择器更改为 #bc1 .dashed-circle。

破折号和数字没有改变颜色的原因是因为特殊性。您使用选择器 #blank-dashboard-breadcrumb span 声明它们的正常颜色 (#bdbebf)——一个 id 和一个元素。您使用 .bc-dotted-to-solid 或 .bc-dashed-to-solid-circle 声明“选定”颜色(黑色)——简单的类。即使破折号和 1 具有适当的类，它们仍然有一个更具体的选择器告诉它们保持灰色。