Javascript 在隐藏/显示具有类的所有元素的函数中单击时更改按钮内部文本

找到了使用类显示/隐藏所有元素的方法，但我需要将单击时的按钮文本从“隐藏”更改为“显示”，然后再从“显示”更改为“隐藏”。这是迄今为止我的JS代码：

document.getElementById("hide").onclick = function() {
    var o = document.getElementsByClassName("details");
    for ( var i = 0; i < o.length; i++ ) {
        if (o[i].style.display == 'none') {
            o[i].style.display = 'block';
        } else {
            o[i].style.display = 'none';
        }
    }
}

document.getElementById（“隐藏”）.onclick=function（）{
var o=document.getElementsByClassName（“详细信息”）；
对于（变量i=0；i

按预期工作，因此它隐藏并显示类中的元素，但我无法为按钮添加内部文本更改。这是我的html：

<button id="hide">Hide</button>
<ul>
    <li>
        <h3>First Item</h3>
        <ul class="details">
            <li>Detail 1</li>
            <li>Detail 2</li>
            <li>Detail 3</li>
        </ul>
    </li>
    <li>
        <h3>Second Item</h3>
        <ul class="details">
            <li>Detail 1</li>
            <li>Detail 2</li>
            <li>Detail 3</li>
        </ul>
    </li>
    <li>
        <h3>Third Item</h3>
        <ul class="details">
            <li>Detail 1</li>
            <li>Detail 2</li>
            <li>Detail 3</li>
        </ul>
    </li>
</ul>

隐藏


第一项

细节1
细节2
细节3



第二项

细节1
细节2
细节3



第三项

细节1
细节2
细节3

这应该可以做到

document.getElementById("hide").onclick = function() {
var o = document.getElementsByClassName("details");
for ( var i = 0; i < o.length; i++ ) {
    if (o[i].style.display == 'none') {
        o[i].style.display = 'block';
        this.innerText='hide';
    } else {
        o[i].style.display = 'none';
        this.innerText='show';
    }
}

document.getElementById（“隐藏”）.onclick=function（）{
var o=document.getElementsByClassName（“详细信息”）；
对于（变量i=0；i

}这应该可以

document.getElementById("hide").onclick = function() {
var o = document.getElementsByClassName("details");
for ( var i = 0; i < o.length; i++ ) {
    if (o[i].style.display == 'none') {
        o[i].style.display = 'block';
        this.innerText='hide';
    } else {
        o[i].style.display = 'none';
        this.innerText='show';
    }
}

document.getElementById（“隐藏”）.onclick=function（）{
var o=document.getElementsByClassName（“详细信息”）；
对于（变量i=0；i

---

}

更新了代码，请运行下面的脚本

我拿起你的按钮，瞄准了innerHTML。更多信息

document.getElementById（“隐藏”）.onclick=function（）{
var o=document.getElementsByClassName（“详细信息”）；
var btn=document.getElementById（“隐藏”）；
对于（变量i=0；i

隐藏


第一项

细节1
细节2
细节3



第二项

细节1
细节2
细节3



第三项

细节1
细节2
细节3

更新了您的代码，请运行下面的脚本

我拿起你的按钮，瞄准了innerHTML。更多信息

document.getElementById（“隐藏”）.onclick=function（）{
var o=document.getElementsByClassName（“详细信息”）；
var btn=document.getElementById（“隐藏”）；
对于（变量i=0；i

隐藏


第一项

细节1
细节2
细节3



第二项

细节1
细节2
细节3



第三项

细节1
细节2
细节3

基于您的问题，我在下面提供了一个工作示例。-它似乎像你所希望的那样工作。我希望这有助于解决您的问题？基于您的问题，我在下面提供了一个工作示例。-它似乎像你所希望的那样工作。我希望这有助于解决你的问题？