Question

我用简单的JavaScript创建了一个简单的手风琴，没有jQuery。它动态地由JSON格式的外部JavaScript文件中给出的数据数量创建。

手风琴在html代码中看起来像那样：

<div id="description"> 
<script language="javascript" type="text/javascript">
startAccordion();
function startAccordion() 
{
    for (var i=1; i<=Object.keys(description).length; i++){
        document.getElementById("description").innerHTML += 
            "<button class='accordion'>Trail " + description[i].Title + "</button>" + "<div class='accordion-panel'>" + "<p>" + description[i].Description + "<br></p>" + "</div>";
    }
}
</script>

在JavaScript中，单击手风琴上的面板时的行为将被处理。

var acc = document.getElementsByClassName('accordion');
var panel = document.getElementsByClassName('accordion-panel');

for (var i = 0; i < acc.length; i++) 
{
  acc[i].onclick = function()
  {         
    // Toggle between adding and removing the "active" class,
    //to highlight the button that controls the panel 
    this.classList.toggle("active");

    //Toggle between hiding and showing the active panel
    var panel = this.nextElementSibling;

    if (panel.style.display === "block") {
        panel.style.display = "none";
    } else {
        panel.style.display = "block";
    }
  }
}

问题： 当用户点击面板并打开/激活某个面板时，是否有可能获得索引或任何有关哪些面板被点击的独特信息？

我真的需要这些信息，因为基于此，应该显示地图上的相关标记。我试了好几个小时，但我找不到，如何获得面板索引。变量＆＃34; i＆＃34;不幸的是总是20，因为包括20个功能。我认为这很奇怪，因为使用acc [i]可以正确打开/激活相关面板。

我想避免使用jQuery，但如果您知道我的解决方案，我可能无法使用jQuery，但我必须再次创建整个手风琴。

Answer 1

根据穆罕默德阿巴斯提供的链接，这就是它的成功方式。这是一个范围问题，在for循环中创建了一个新范围：

var acc = document.getElementsByClassName('accordion');
for (var i = 0, i < acc.length; i++)
{

(function(index){
    acc[i].onclick = function(){

    //same as within the function given in the original post

          alert(index)  ;
    }    
})(i);

}

简单的JavaScript手风琴 - 如何获取所点击面板的索引？

1 个答案: