单击按钮时隐藏和显示 div

Question

我想根据按钮的点击来隐藏和显示一些元素。据我所知，将 display 属性设置为 none 应该可以完成工作。但出于某种原因，我的代码无法正常工作。谁能告诉我代码有什么问题？

let py = true;
document.getElementsByClassName("python")

function togglePython() {
  if (py == true) {
    document.getElementsByClassName("python").style = "display: none";
  } else {
    document.getElementsByClassName("python").style = "display: block";
  }
}

<h1>Project</h1>
<button onclick="togglePython()">Toggle</button>
<div class="python">
  <h2>Python</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
  <h2>C#</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
  <h2>JS</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="python">
  <h2>Python</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 1

getElementsByClassName returns 具有所有给定 class 名称的所有子元素的类数组对象。它的工作方式是遍历文档中的所有元素，然后分别将样式应用于每个元素。

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <script>
        let py=true;
    document.getElementsByClassName("python")
    function togglePython(){
    let itms= document.getElementsByClassName("python");
      for(i=0;i<itms.length;i++){
      if (py==true)      
        itms[i].style = "display: none";
       else 
        itms[i].style = "display: block";
      }
      py=!py; //so that you can toggle multiple times
    }
    </script>
</head>

<body>
    <h1>Project</h1>
    <button onclick="togglePython()">Toggle</button>
    <div class="python">
      <h2>Python</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      <h2>C#</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      <h2>JS</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="python">
      <h2>Python</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </body>
</html>

Answer 2

您没有更改点击事件处理程序中的标志。此外，您可以对 showing/hiding 元素使用 jQuery 方法。我建议在下面尝试一下：

let showPyths = true;
const pythonElements = [...document.getElementsByClassName("python")];

function togglePython(){
  showPyths = !showPyths;
  if (showPyths){
    pythonElements.forEach((el) => el.style.display = 'block');
  } else {
    pythonElements.forEach((el) => el.style.display = 'none');
  }
}

$('#jQueryTglBtn').click(function() {
  $(pythonElements).slideToggle();
});

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
</head>

<body>
    <h1>Project</h1>
    <button onclick="togglePython();">Toggle</button>
    <button id="jQueryTglBtn">Toggle (jQuery slideToggle)</button>
    <div class="python">
      <h2>Python</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      <h2>C#</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      <h2>JS</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="python">
      <h2>Python</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

Answer 3

布尔值 py 设置为 true 一次并且从未更改，这就是为什么您每次都会得到相同的结果。

此外，getElementsByClassName 正在返回一个您需要迭代的集合。为了方便起见，我将其更改为带有 forEach 函数的 querySelectorAll 方法来迭代结果。

let py = true;

document.querySelectorAll(".python").forEach((el) => {
  el.style = "background-color: yellow";
});

function togglePython() {
  if (py == true) {
    document.querySelectorAll(".python").forEach((el) => {
      el.style.display = "none";
    });
    py = false;
  } else {
    document.querySelectorAll(".python").forEach((el) => {
      el.style.display = "block";
    });
    py = true;
  }
}

<h1>Project</h1>
<button onclick="togglePython()">Toggle</button>
<div class="python">
  <h2>Python</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
  <h2>C#</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
  <h2>JS</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="python">
  <h2>Python</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 4

更有见地的回答总结：

“您没有更改点击事件处理程序中的标志。”（拆分器）； “布尔值 py 设置为 true 一次并且从未更改，这就是为什么每次都会得到相同的结果。” (Mark Baijens)
"…getElementsByClassName 正在返回一个您需要迭代的集合。" (Mark Baijens)； "getElementsByClassName returns 具有所有给定 class 名称的所有子元素的类数组对象。" (kapil pandey)

香草 JS：

let py = true;
function togglePython() {
  [...document.getElementsByClassName("python")].forEach(i => {
    i.style.display = py ? "none" : "block"
  })
  py = !py
}

如果您正在使用 jQuery，您应该一直使用 jQuery：

let py = true;
function togglePython() {
  $(".python").css("display", py ? "none" : "block")
  py = !py
}

单击按钮时隐藏和显示 div

Hiding and showing divs on button click

html

javascript

css

web-frontend