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

您无需在点击事件处理程序中更改标志。另外，您可以使用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 2

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

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

布尔值tell application "Microsoft Outlook" set theMessage to make new outgoing message with properties {sender:{name:"My Name", address:"demo@demo.com"}, subject:"test", plain text content:"Hallo"} tell theMessage make new to recipient with properties {email address:{address:"test@test.com"}} end tell send theMessage end tell一次设置为py，并且从未更改，这就是为什么每次都得到相同结果的原因。

true还返回您需要迭代的集合。为了简化操作，我将其更改为带有getElementsByClassName函数的querySelectorAll方法，以遍历结果。

forEach

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

Answer 4

更深刻的答案摘要：

“您无需在点击事件处理程序中更改标志。” （拆分器）； “布尔值py一次设置为true，并且从未更改过，这就是为什么每次都得到相同结果的原因。”
“…... getElementsByClassName返回您需要迭代的集合。” （Mark Baijens）; “ getElementsByClassName返回具有所有给定类名称的所有子元素的类似数组的对象。” （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

4 个答案: