Question

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

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

我有15个人在7个图表中回答。当你点击graph1中person1的一个点时，我希望这个点和其他图形中此人的所有点变得更大。所有的点都有2个类：.circle和.circle [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>

Javascript / jQuery添加类点击不工作圈div

1 个答案: