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