Javascript/jQuery 添加点击类不适用于圆形 div

Question

多年来，我已经在这里找到了很多答案，但现在我真的陷入了困境，并写下了我的第一个发布的问题!

我正在制作一个带有一些图表的网站。图表的背景是显示 x 轴和 y 轴的图像。我使用 Javascript 绘制所有点，并根据 .txt 文件中的数据定位它们。这一切都有效(耶!)，但是......这是我的问题:

我有 15 个人在 7 张图表中做出了回答。当您单击 graph1 中 person1 的一个点时，我希望该点以及其他图中此人的所有点都变大。所有点都有 2 个类:.circle 和 .circle[number](每个圆圈[number] 出现在每个图表中，因此 [number] 是人员 ID)。因此，我虽然在单击时将 .big 类添加到 .circle1 中可以解决问题，但由于某种原因，我从未添加该类。

我尝试了所有通常有效的东西，也尝试了我在这里找到的很多答案，当我尝试这个时，例如我的页面标题，它正在工作。所以我有一种感觉问题出在这些点上......我已经确保这些点位于图像上方，所以这不是问题。当我用悬停来设置点的样式时，它确实知道我悬停在哪个点上并使其更大。还尝试在 div 中添加一些 HTML，但仍然不起作用。

我在 HTML 中使用 Javascript 画点，如下所示:

<div class="circle circle0" style="position: absolute; left: 275.988px; top: 165.559px;"></div>
<div class="circle circle1" style="position: absolute; left: 231.204px; top: 141.898px;"></div>
<div class="circle circle2" style="position: absolute; left: 228.308px; top: 138.01px;"></div>
etc... (in every graph, so 7 times but every time different positions based on the data)

.circle {
   border-width: 2px;
   border-style: solid;
   border-color: black;
   border-radius: 50%;
   width: 10px; 
   height: 10px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0;
   z-index: 999;
}

无效的示例(仅在点上，当使用标题时它有效):

$(".circle").on("click",function(){
    $(".circle").addClass("big");
});

有谁知道为什么这不起作用以及它如何起作用？谢谢!

答案:代码没有任何问题，我只需要把代码提高一个级别(愚蠢!有时就是这么简单..)

Answer 1

您缺少 CSS 中的“大”类，因此这可能是它不起作用的原因之一。这是使用您的代码和添加的类的示例:

$(document).ready(function() {
   $(".circle0").on("click",function(){
      $(".circle0").toggleClass("big");
   });
   $(".circle1").on("click",function(){
      $(".circle1").toggleClass("big");
   });
   $(".circle2").on("click",function(){
      $(".circle2").toggleClass("big");
   });
});

.circle {
   border-width: 2px;
   border-style: solid;
   border-color: black;
   border-radius: 50%;
   width: 10px; 
   height: 10px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0;
   z-index: 999;
}

.big {
   width: 15px; 
   height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle circle0" style="position: absolute; left: 275.988px; top: 165.559px;"></div>
<div class="circle circle1" style="position: absolute; left: 231.204px; top: 141.898px;"></div>
<div class="circle circle2" style="position: absolute; left: 228.308px; top: 138.01px;"></div>