简单的JavaScript手风琴 - 如何获得点击面板的索引？ [英] Simple JavaScript accordion - how to get the index of the clicked panel?

问题描述

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

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

 < div id =description> 
< script language =javascripttype =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> 
  

  var acc = document.getElementsByClassName（'accordion'）;手风琴上的面板被点击，被处理。 
 var panel = document.getElementsByClassName（'accordion-panel'）; 
 
 for（var i = 0; i< acc.length; i ++）
 {
 acc [i] .onclick = function（）
 {
 //在添加和删除活动类之间切换，
 //突出显示控制面板的按钮
 this.classList.toggle（active）; 
 
 //隐藏和显示活动面板之间切换
 var panel = this.nextElementSibling; 
 
 if（panel.style.display ===block）{
 panel.style.display =none; 
} else {
 panel.style.display =block; 
 
 
 
 $ / code $ / pre 
 
 
 问题： / strong> 
当用户点击一个面板并打开/激活某个面板时，是否有可能获得有关哪个面板被点击的索引或任何独特信息？
 
 
 
我真的需要这些信息，因为基于此，应显示地图上的相关标记。我尝试了几个小时，但我找不到，如何获得面板指数。不幸的是，变量i总是20，因为包含了20个特征。我认为这很奇怪，因为随着acc [i]相关面板被正确打开/激活。 
 
 
 
我想避免使用jQuery，但是如果您知道使用我的解决方案，我可能可以使用jQuery，但我不得不再次创建整个手风琴。
解决方案
继穆罕默德阿巴斯提供的链接后，这就是解决方案。这是一个范围问题，在for循环中创建一个新范围： 
 
 
  var acc = document.getElementsByClassName（'accordion ）; 
 for（var i = 0，i< acc.length; i ++）
 {
 
（function（index）{
 acc [i] .onclick = function（）{
 
 //与原始文章
 
 alert（index）; 
} 
}）（i ）; 
 
} 
  
 
I created a simple accordion with plain JavaScript, no jQuery. It dynamically is created by the number of data given in an external JavaScript file in JSON format.


The accordion looks like that in the html code:
<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>


Within the JavaScript the behavior when a panel on the accordion is clicked, is handled.
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";
    }
  }
}
Question: 
When the user clicks on a panel and this certain one is opened/activated, is there any possibility to get the index or any unique information about which of the panels has been clicked?

I really need this information, because based on that, the related marker on a map should be shown. I tried for hours and hours, but I could not find out, how to get the panel index. The variable "i" is unfortunately always 20, as 20 features are included. I think this is strange, because with acc[i] the related panel is opened/activated correctly. 

I would like to avoid using jQuery, but if you know that with my solution it is impossible I maybe could use jQuery, although I would have to create the whole accordion again.
解决方案
Following the link provided by Mohamed Abbas, this is the way it worked out. It is a scope issue, where within the for loop a new scope is created:
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手风琴 - 如何获得点击面板的索引？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！