1
我目前正在开发更复杂的手风琴。手风琴应有4个按钮（0-3部分），内容单独（0-3）。通过点击“部分0”应该显示“lorem ipsum 0”。通过点击“第1部分”，内容“lorem ipsum 0”将被替换为“lorem ipsum 1”。Javascript：从动态生成的ID中提取的动态手风琴内容
最后一个网站将有一个未知数量的行，每个行包含4个手风琴。这意味着，脚本必须是动态的。
我的方法是使用JS生成ID，将该属性设置为每个面板，然后再次调用它们以使手风琴起作用。但我只能打电话给所有的内容（如JSFiddle）或者只是循环中的最后一个内容。
如何在不丢失布局的情况下显示/替换每个手风琴的内容？
也许这是一个更好的方法来实现这一点？
HTML：
<div class="row">
<div class="three columns">
<button class="accordion">Section 0</button>
</div>
<div class="three columns">
<button class="accordion">Section 1</button>
</div>
<div class="three columns">
<button class="accordion">Section 2</button>
</div>
<div class="three columns">
<button class="accordion">Section 3</button>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 0...</p>
</div>
</div>
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 1...</p>
</div>
</div>
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 2...</p>
</div>
</div>
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 3...</p>
</div>
</div>
</div>
JS：
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var writeID = document.getElementsByClassName("panel");
for (var y = 0; y < writeID.length; y++) {
var newID = "demo-"+y;
writeID[y].setAttribute("id", newID);
var panel = document.getElementById(newID);
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
}
我还创建了一个JSFiddle。
任何帮助表示感谢！
干杯 最大
编辑：我真的很感激任何形式的帮助在这里。我试图通过关闭和forEach解决问题，但没有解决。如果我必须澄清以上任何内容，我很乐意回答任何问题。
以下是代码的当前状态。它给我的所有内容，但我想只有一次每个手风琴：
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
for (var i = 0; i < acc.length; i++) {
var panel = document.getElementById("demo-"+i);
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
}
或者换句话说，我试图做到这一点，但在一个动态的方式
var acc = document.getElementsByClassName("accordion");
acc[0].onclick = function() {
this.classList.toggle("active");
var panel = document.getElementById("demo-0");
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
acc[1].onclick = function() {
this.classList.toggle("active");
var panel = document.getElementById("demo-1");
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
让我试着在给出我的方法之前了解您的问题！每个按钮的内容都是动态的，我认为它是对的？与按钮相同？ – funcoding
是的，内容将是动态的。它可以是文字或图像。按钮将遵循一个模式，因此它们将具有固定的名称（如示例中所示）。 – Max
我现在读了很多关于javascript loop enclosure的内容，但它仍然无法弄清楚。任何人提供一些帮助？谢谢！ – Max