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

应该发生的是：

我第一次单击按钮-我希望div隐藏，并且该按钮中的文本更改为“ Show Divs”。
我第二次单击按钮-我希望显示div，并且希望该按钮中的文本改回'Hide Divs'。

Answer 1

您已经拥有大部分功能，只有很少的问题

div包装按钮中带有引号，synatex错误
在切换功能内，您需要调用changeBtnText进行更改
按钮没有价值，因此如果失败，则可以使用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";
    }
  }

Answer 2

您可以轻松使用jQuery女巫：

第一步：添加jQuery

 <head>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 </head>

现在输入代码：

   $(".hide-show-divs-btn").click(function() {

      $( ".hide-show-divs" ).toggle();




      $(this).text() === 'Hide Divs'
      ? $(this).text('Show Divs')
      : $(this).text('Hide Divs')

     })

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

2 个答案: