elementByClassName上的JavaScript onclick事件

我有下面的标记，我试图在单击后运行javascript函数。到目前为止，我还没有面对任何成功。Plz帮助-

<div class='color-bar'></div>
<div class='color-bar'></div>
<div class='color-bar'></div>
<div class='color-bar'></div>

var ColorBars = document.getElementsByClassName("color-bar"); 
var charts = $("#line-container").highcharts();
var series;
var colorIndex = new Array();

for(var i = 0; i < ColorBars.length; i++){

    ColorBars[i].onclick = function(){
        hideColor(i);
    }
}

function hideColor(index){
   var charts = $("#line-container").highcharts();

   var series = charts.series[index];

   if(series.visible){
       series.hide();
   }
   else{
       series.show();
   }
}  

var ColorBars=document.getElementsByClassName（“颜色条”）；
var charts=$（“#行容器”）.highcharts（）；
var系列；
var colorIndex=新数组（）；
对于（var i=0；i

我遇到的问题是弄清楚用户单击了哪个颜色栏。是第一个，第二个还是第三个。基于此，我需要启动hideColor函数

---

非常感谢。向您致意，jahid

您需要提供色条ID：

<div class='color-bar' id="colorbar1"></div>
<div class='color-bar' id="colorbar2">></div>
<div class='color-bar' id="colorbar3">></div>
<div class='color-bar' id="colorbar4">></div>

您可以使用

hideColor（$（this.index（））而不是
hideColor（i）。有人已经发布了一个答案，试图指出这一点，但随后删除了它。无论如何，这应该有助于解决这个问题。
ColorBars[i].id == X