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

【问题标题】：Change button inner text on click in a function that hides/shows all elements with class在隐藏/显示所有具有类的元素的函数中单击时更改按钮内部文本
【发布时间】：2020-10-15 15:20:18
【问题描述】：

找到了一种显示/隐藏所有类元素的方法，但我需要将单击时的按钮文本从隐藏更改为显示，而不是再次从显示更改为隐藏。到目前为止，这是我的 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';
        }
    }
}

按预期工作，因此它隐藏和显示带有类的元素，但我无法为按钮添加内部文本更改。这是我的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>

【问题讨论】：

根据您的问题，我在下面提供了一个工作示例。 - 它似乎可以按您的意愿工作。我希望它有助于解决您的问题？

标签： javascript toggle show-hide

【解决方案1】：

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

我选择了你的按钮并定位到了 innerHTML。更多信息here.

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

<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>

【讨论】：

【解决方案2】：

应该这样做；

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';
    }
}

}

【讨论】：