elementByClassName

Question

我有跟随标记，我试图运行一个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();
   }
}  

我遇到的问题是找出哪个彩条用户点击了。它是第一个，第二个还是第三个。基于此我需要触发hideColor函数。

非常感谢。最好的问候，jahid

Answer 1

你需要给你colorbars 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>

然后你可以查看：

ColorBars[i].id == X