blocks|key|643636|text|我将您的代码复制到一个非常简单的页面的上下文中(参见下面)，它似乎很有效.我可能遗漏了什么，但问题是否在您的项目的其他地方呢？也许在浏览器控制台中一片一片地调查它可能会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|643637|<!DOCTYPE+html>
<html>
++++<script>
++++++++function+myFunction(){
++++++var+elms+=+document.getElementsByClassName("tw");
+++++Array.from(elms).forEach((x)+=>+{
++++++++if+(x.style.display+===+"block")+{
++++++++++x.style.display+=+"none";
++++++++}+else+{
++++++++++x.style.display+=+"block";
++++++++}
++++++})
++++}
++++</script>
++++<body>
++++++++<button+onclick="myFunction()">Click+me</button>
++++++++<div+class="tw">1</div>
++++++++<div+class="tw"+style="display:+block;">2</div>
++++++++<div+class="tw">3</div>
++++++++<div+class="tw"+style="display:+block;">4</div>
++++</body>
</html>|code-block|syntax|javascript|643638|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I copied your code into the context of a very simple page (see below) and it seems to work...I might have missed something, but could the issue be elsewhere in your project? Perhaps investigating it piece by piece in the browser console could help.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;script&gt;
        function myFunction(){
      var elms = document.getElementsByClassName(&quot;tw&quot;);
     Array.from(elms).forEach((x) =&gt; {
        if (x.style.display === &quot;block&quot;) {
          x.style.display = &quot;none&quot;;
        } else {
          x.style.display = &quot;block&quot;;
        }
      })
    }
    &lt;/script&gt;
    &lt;body&gt;
        &lt;button onclick=&quot;myFunction()&quot;&gt;Click me&lt;/button&gt;
        &lt;div class=&quot;tw&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;tw&quot; style=&quot;display: block;&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;tw&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;tw&quot; style=&quot;display: block;&quot;&gt;4&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|643665|text|没有将显示值设置为默认值，因此，当您试图访问从未在css或样式中使用显示的元素时，它将返回undefined+or+nothing。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|643666|这就是为什么在第一个按钮上，如果没有任何显示的元素，单击什么都不会发生，然后由于您的函数，所有这些元素都会通过否则的显示:块，然后在第二个按钮上单击all切换。|643667|我喜欢做的是创建一个像displayNone这样的类|643668|所以在css中：|643669|.displayNone{
+++++display:none;
}|code-block|syntax|javascript|643670|然后，每当您想要使元素不可见时，给它这个类，然后单击该按钮，只需移除该类，所有元素就会可见。|643671|就像这样在你的功能中：|643672|function+myFunction()+{
++++++++++++var+elms+=+document.getElementsByClassName("tw");
++++++++++++console.log(elms);
++++++++++++console.log(Array.from(elms));
++++++++++++Array.from(elms).forEach((x)+=>+x.classList.remove('displayNone'));+//+just+remove+the+class
++++++++}|643673|或者，您也可以使用classList.toggle('displayNone)，这样它就可以在display和inital显示之间切换。|643674|entityMap^0|19|K|0|0|0|0|0|0|0|0|9|U|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|15|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|16|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|18|8|@]|D|@]|E|$]]|$1|U|3|V|5|N|7|19|8|@]|D|@]|E|$O|P]]|$1|W|3|X|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|Z|$]]

<p>There is no display value set as default, so when you try to access it on an element where you never used display in css or style it returns <code>undefined or nothing</code></p>
<p>Thats why on the first button click nothing happens if no element has any display, then due to your function all of them get through the else display: block and on the second click the all toggle</p>
<p>What i like to do is creating a class like displayNone</p>
<p>so in css:</p>
<pre class="lang-css prettyprint-override"><code>.displayNone{
     display:none;
}
</code></pre>
<p>then whenever you wanna make an element invisible give it this class and then when you click the button just remove the class and all elements become visible</p>
<p>so like this in your function:</p>
<pre class="lang-js prettyprint-override"><code>function myFunction() {
            var elms = document.getElementsByClassName(&quot;tw&quot;);
            console.log(elms);
            console.log(Array.from(elms));
            Array.from(elms).forEach((x) =&gt; x.classList.remove('displayNone')); // just remove the class
        }
</code></pre>
<p>alternatively you can also use the <code>classList.toggle('displayNone)</code> so it switches between display none and its inital display</p>


blocks|key|643699|text|我将继续在CSS领域中进行样式化，并在JS中切换一个类来显示元素。另外，当您使用nodeList返回一个querySelectorAll()时，它已经是数组形式了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|643700|将css类添加到CSS中：|643701|.display+{
++display:+block;
}|code-block|syntax|javascript|643702|然后，您的JS功能可以通过toggle()进行更多的简化。|643703|let+elms+=+document.querySelectorAll(".tw");
function+myFunction()+{
++elms.forEach(el+=>++el.classList.toggle('display'))
}|643704|JSFiddle|643705|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/g1h6jy0k/^0|1G|I|0|0|0|D|8|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>I would keep styling in the CSS realm and toggle a class in JS to display the element. Also when you return a nodeList using <code>querySelectorAll()</code> it is in array form already.</p>
<p>Add a css class to the CSS:</p>
<pre><code>.display {
  display: block;
}
</code></pre>
<p>Then your JS function could be a lot more streamlined with <code>toggle()</code></p>
<pre><code>let elms = document.querySelectorAll(&quot;.tw&quot;);
function myFunction() {
  elms.forEach(el =&gt;  el.classList.toggle('display'))
}

</code></pre>
<p><a href="https://jsfiddle.net/g1h6jy0k/" rel="nofollow noreferrer">JSFiddle</a></p>


<p>I have this JS function that is supposed to initially hide a  that has the class name &quot;tw&quot; and when clicked on a button it should make it visible. However, whenever I click the button it only changes the visibility of one div. I have 4.  How can I fix this?</p>
<pre><code> function myFunction(){
      var elms = document.getElementsByClassName(&quot;tw&quot;);
     Array.from(elms).forEach((x) =&gt; {
        if (x.style.display === &quot;block&quot;) {
          x.style.display = &quot;none&quot;;
        } else {
          x.style.display = &quot;block&quot;;
        }
      })
    }
</code></pre>
<p><a href="https://jsfiddle.net/qm8bxryh/307/" rel="nofollow noreferrer">https://jsfiddle.net/qm8bxryh/307/</a>
Here's the fiddle</p>


Why does my JS function only manipulate one <div> that is assigned to the class instead of all?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有这个JS函数，它最初应该隐藏一个类名为"tw“的函数，当单击一个按钮时，它应该会使它可见。但是，每当我单击该按钮时，它只会更改一个div的可见性。我有4个。我怎么解决这个问题？ function myFunction(){      var elms = document.getElementsByClassNam...

问为什么我的JS函数只操作一个分配给类而不是所有的<div>？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的JS函数只操作一个分配给类而不是所有的<div>？EN