Javascript查找按钮的内容（每个按钮1个内容）

我有一个钮扣

内容是什么

在一个页面上可能有多个按钮，但每个按钮都链接到一个内容，因此如果一个页面中有7个按钮，那么也有7个内容

内容可能放置在远离按钮的地方，事实上，它们之间可能有文本、图像、段落、列表，甚至其他按钮，但在最后一种情况下，第二个按钮的内容放置在第一个按钮的内容之后

这就是典型的例子

•按钮后面跟着文本

The <button class="collapsible">sky</button> is blue.
<div class="content">it is above our heads</div>

现在我想在某个按钮和它的内容之间放置图像或另一个按钮，但是使用

if

很难处理所有情况

由于每个按钮都链接到一个唯一的内容，因此是否可以编写一个JS，给定按钮编号

n

，它会找到内容编号

n

我在考虑定义变量

var coll = document.getElementsByClassName("collapsible");
var cont = document.getElementsByClassName("content");

（因此

coll.length==cont.length

），然后对于给定的

i

将

coll[i]

与

cont[i]

关联。因此，我将

内容的定义编辑为

var content = cont[i];

但我发现这不起作用，因为此时
I
等于
coll.length
，也就是说
I
超出范围。这是我想的完整的JS

( function() {
var coll = document.getElementsByClassName("collapsible");
var cont = document.getElementsByClassName("content");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = cont[i];
    console.log(content)
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
} )();

（函数（）{
var coll=document.getElementsByClassName（“可折叠”）；
var cont=document.getElementsByClassName（“内容”）；
var i；
对于（i=0；i
这似乎适用于所有情况

<script type="text/javascript">
( function() {
    coll = document.getElementsByClassName("collapsible");
    cont = document.getElementsByClassName("content");
    var i;
    for (i = 0; i < coll.length; i++) {
        coll[i].setAttribute('data-id', 'con' + i);
        cont[i].setAttribute('id', 'con' + i);
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = document.getElementById(this.getAttribute('data-id'));
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }
} )();
</script>


（功能（）{
coll=document.getElementsByClassName（“可折叠”）；
cont=document.getElementsByClassName（“内容”）；
var i；
对于（i=0；i
与问题本身没有直接关系，但是，about div inside按钮：您应该尝试在html标记中声明新属性，并使用它来标识内容。如果你回答了自己的问题，把它贴在下面并接受。不要在问题中张贴答案。
var content = this.nextElementSibling;
if (!content) {
    content = this.parentElement.nextElementSibling;
}

var coll = document.getElementsByClassName("collapsible");
var cont = document.getElementsByClassName("content");

var content = cont[i];

( function() {
var coll = document.getElementsByClassName("collapsible");
var cont = document.getElementsByClassName("content");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = cont[i];
    console.log(content)
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
} )();

<script type="text/javascript">
( function() {
    coll = document.getElementsByClassName("collapsible");
    cont = document.getElementsByClassName("content");
    var i;
    for (i = 0; i < coll.length; i++) {
        coll[i].setAttribute('data-id', 'con' + i);
        cont[i].setAttribute('id', 'con' + i);
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = document.getElementById(this.getAttribute('data-id'));
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }
} )();
</script>