javascript - 如何隐藏和显示多个div并同时更改按钮内容？

Question

我正在尝试隐藏 div 并同时更改按钮的文本内容。

问题:我遇到的问题是 div 被隐藏，但按钮的内容没有改变。

我将使用多个按钮来隐藏和显示多个图像和文本。

HTML

 <div class="hide-show-divs">
   <p>Some content in a div</p>
   <p>More content in a div</p>
 </div>

 <div class="hide-show-divs">
   <p>Some content in a div</p>
   <p>More content in a div</p>
 </div>

按钮

<div>
  <button class="hide-show-divs-btn" onclick="toggle()">Hide Divs</button>
</div>

JavaScript

function toggle() {
  var hideShowDivs = document.getElementsByClassName("hide-show-divs");
  for(var i = 0; i < hideShowDivs.length; i++){
    if (hideShowDivs[i].style.display === "none") {
      hideShowDivs[i].style.display = "block";
      changeBtnText();
    } else {
      hideShowDivs[i].style.display = "none";
    }
  }
}

function changeBtnText() {
  var hideShowImgBtn = document.getElementsByClassName("hide-show-divs-btn");
  for(var i = 0; i < hideShowImgBtn.length; i++)
    if(hideShowImgBtn[i].value =="Show divs") {
      hideShowImgBtn[i].value = "Hide divs";
    }else {
      hideShowImgBtn[i].value = "Show divs";
    }
  }

应该发生的是:

1. 第一次单击该按钮时 - 我希望隐藏 div 以及该按钮中的文本更改为“显示 Divs”。

2. 第二次单击该按钮时 - 我希望显示 div 并将该按钮中的文本更改回“隐藏 Divs”。

Answer 1

您已经拥有几乎大部分功能，只有几个问题

1. div 换行按钮中有引号，synatx 错误
2. 在切换函数内部，您需要调用changeBtnText才能更改
3. 按钮没有值，因此如果失败，您可以使用innerText

function toggle() {
  var hideShowDivs = document.getElementsByClassName("hide-show-divs");
  changeBtnText(); // Invoking changeBtnText added
  for(var i = 0; i < hideShowDivs.length; i++){
    if (hideShowDivs[i].style.display === "none") {
      hideShowDivs[i].style.display = "block";
      changeBtnText();
    } else {
      hideShowDivs[i].style.display = "none";
    }
  }
}

function changeBtnText() {
  var hideShowImgBtn = document.getElementsByClassName("hide-show-divs-btn");
  for(var i = 0; i < hideShowImgBtn.length; i++)
    // Using innerText instead of value
    if(hideShowImgBtn[i].innerHTML =="Show divs") {
      hideShowImgBtn[i].innerHTML = "Hide divs";
    }else {
      hideShowImgBtn[i].innerHTML = "Show divs";
    }
  }