Javascript/jQuery添加班上的点击不工作的圆形div

Question

多年来，我已经在这里找到了很多答案，但现在我真的停留在一些东西上，写下我的第一个发布的问题！

我正在用一些图形制作一个网站。图形的背景是显示x和y轴的图像。我使用Javascript绘制所有的点，并根据.txt文件中的数据定位它们。这是所有工作（耶！），但...这是我的问题：

我有15个人谁回答了7张图。当你在graph1中点击person1中的一个点时，我希望这个点和其他图中这个人的所有点都变大。所有的点都有两个类：.circle和.circle [number]（每个圆[number]出现在每个图中，所以[number]是人的ID）。所以我虽然在点击时将.big类添加到.circle1会做到这一点，但由于某种原因，我永远不会添加类。

我尝试了所有我通常使用的东西，也尝试了很多我在这里找到的答案，当我尝试使用它时，例如我的页面标题正在工作。所以我有一种感觉，问题在于点......我已经确定点在图像之上，所以这不是问题。当我用鼠标悬停时，它确实知道我正在盘旋哪一个，并使它变大。也尝试在div中添加一些HTML，但仍然无法正常工作。

我画使用Javascript点在HTML这样的：

<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>