Javascript 如何识别单个元素的位置？

我正在创建一个简单的评级应用程序，但是，不是所有的圆圈都变成绿色，我只希望选定的圆圈保持绿色

$('#rating-container').click(function () {
    var element = $('#target');
    var container = $('#rating-container');
    var index = container.children().get(element);
    var foundElement = container.children().get(index);
    var jQueryObject = $(foundElement);
    jQueryObject.addClass('rating-chosen');
});

HTML：

<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div id="target" class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

代码笔链接如下：

您可以像下面这样使用。你可以用这个方法找到索引

$（“#评级容器div”）。单击（功能（索引，项目）{
$（“#rating container div”）.removeClass（'rating-selected'）；//如果不想从以前的选择中删除类，请注释（删除）此行
$（this.toggleClass（'rating-selected'）；
log（$（this.index（））；
});
正文{
字体系列：Verdana；
}
h1，
h2，
h3{
颜色：深蓝色；
}
.评级圈{
高度：2米；
宽度：2米；
边框：0.1米纯黑色；
边界半径：1.1米；
显示：内联块；
保证金：0；
填充：0.1米；
}
.评级悬停{
背景颜色：黄色；
}
.所选评级{
背景颜色：绿色；
}
看看这个。我只是使用了一种稍微不同的方法：


$（函数（）{
$（“.rating circle”）。单击(
（e） =>{
event=e | | window.event；
var target=event.target | | event.src元素；
$（“.rating circle”）.removeClass（“选择评级”）；
$（“#”+target.id）.addClass（“所选评级”）；
}
)
});
正文{
字体系列：Verdana；
}
h1，h2，h3{
颜色：深蓝色；
}
.评级圈{
高度：2米；
宽度：2米；
边框：0.1米纯黑色；
边界半径：1.1米；
显示：内联块；
保证金：0；
填充：0.1米；
}
.评级悬停{
背景颜色：黄色；
}
.所选评级{
背景颜色：绿色；
}


工作

$（this）.index（）
-给出单击圆的索引

$（this）.toggleClass（“选择评级”）-切换类-如果类不存在，则添加类；如果类存在，则删除类。
更新了笔。看看这个。
$(document).ready(function() {
  $(".rating-circle").click(function() {
    // reset all
    $(this).parent().find('div').removeClass("rating-chosen");
    // Set selected
    $(this).addClass("rating-chosen");
  });
});