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

问题描述 投票：0回答：2

我试图隐藏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以及该按钮中的文本以更改为“Show Divs”。
  2. 我第二次点击按钮 - 我希望显示div，以及该按钮中的文本将被更改回'Hide Divs'。
javascript html5
2个回答
2
投票

您已经拥有几乎所有功能，只有少数几个问题

  1. div包装按钮有引号，语法错误
  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";
    }
  }
0
投票

你可以使用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')

     })
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.