帶有Javascript的多個隱藏/顯示按鈕

Question

我正在爲學校的網站項目工作。目前，我正在嘗試用問題和答案創建測驗。我想要隱藏答案並用按鈕顯示。目前，我正在使用腳本，用戶一旦上傳就「朦朧」。

我知道只有一個按鈕可以工作，因爲腳本使用了id而不是類。我想改變這一點，但我不知道如何...你們可以幫我嗎？

var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>'; 
var show_button = 'Show', hide_button = 'Hide'; 
function showhide() { 
    var div = document.getElementById("hide_show"); 
    var showhide = document.getElementById("showhide"); 
    if (div.style.display !== "none") { 
     div.style.display = "none"; 
     button = show_button; 
     showhide.innerHTML = button_beg + button + button_end; 
    } else { 
     div.style.display = "block"; 
     button = hide_button; 
     showhide.innerHTML = button_beg + button + button_end; 
    } 
} 
function setup_button(status) { 
    if (status == 'Show') { 
     button = hide_button; 
    } else { 
     button = show_button; 
    } 
    var showhide = document.getElementById("showhide"); 
    showhide.innerHTML = button_beg + button + button_end; 
} 
window.onload = function() { 
    setup_button('hide'); 
    showhide(); // if setup_button is set to 'show' comment this line 
} 

Answer 1

var buttons = document.querySelectorAll('.hide-show'); 
 
buttons.forEach(function (button) { 
 
    button.onclick = function() { 
 
    var content = this.parentNode.getElementsByTagName('span')[0]; 
 
    if (content.style.display !== 'none') { 
 
     content.style.display = 'none'; 
 
     this.textContent = 'show'; 
 
    } else { 
 
     content.style.display = 'inline'; 
 
     this.textContent = 'hide'; 
 
    } 
 
    } 
 
})

<div> 
 
    <button class="hide-show">hide</button> 
 
    <span>Content... 1</span> 
 
</div> 
 

 
<div> 
 
    <button class="hide-show">hide</button> 
 
    <span>Content... 2</span> 
 
</div>