个人中心
gpt4 book ai didi

javascript - 隐藏标签不可见

转载 作者：行者123 更新时间：2023-11-30 14:01:16 25 4
gpt4 key购买 nike

我想隐藏一些文本并显示一些标签。单击底部后，我的文字将消失，但我的标签不显示。我该怎么办？

<body>
        <div id="middle">
            <div id="left">
            </div >
            <div id="m">
            Name: <input type="text" name="y1"><br />
            Family: <input type="text" name="y1"><br />
            Phone: <input type="text" name="y1"><br />

            <label style="display: none "  name="y2" >A </label>
            <label  style="display: none " name="y2" >B </label>
            <label style="display: none " name="y2" >C </label>
            <button  onclick="myFunction()">Hide elements</button>

            <script>
            function myFunction() {
              var x = document.getElementsByName("y1");
              for (var i = 0; i < x.length; i++) {
                x[i].style.display = "none";
              }
              var x = document.getElementsByName("y2");
              for (var i = 0; i < x.length; i++) {
                x[i].style.display = "visible !important"; 
              }
            }
            </script>
    </div>
    </body>

最佳答案

这是因为display CSS property没有值 visible。 visible 用于 visibility 属性。对于 display，您可以将其设置为标签的 inline。

话虽如此，您并没有使用 label element首先是正确的。它旨在与您没有做的表单字段相关联，因此您应该改用 span 元素。

此外，不要使用内联样式或事件处理程序。使用 CSS 类并在 script 中执行所有脚本。

.hidden { display:none; }
            Name: <input type="text" name="y1" class="hidable"><br>
            Family: <input type="text" name="y2" class="hidable"><br>
            Phone: <input type="text" name="y3" class="hidable"><br>

            <span class="hidden y2">A</span>
            <span class="hidden y2">B</span>
            <span class="hidden y2">C</span>
            <button>Hide elements</button>

            <script>
              // Get the inputs and spans into their own Arrays
              let inputs = Array.prototype.slice.call(document.querySelectorAll("input.hidable"));
              let spans = Array.prototype.slice.call(document.querySelectorAll("span.y2")); 
              
              // Set up the click event handler in JavaScript, not in HTML
              document.querySelector("button").addEventListener("click", hideShow);
              
              function hideShow() {
                // Loop over the inputs
                inputs.forEach(function(input){
                  input.classList.add("hidden"); // Hide the input
                });
                
                // Loop over the spans
                spans.forEach(function(input){
                  input.classList.remove("hidden"); // Show the span
                });
              }
            </script>

关于javascript - 隐藏标签不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56280372/

25 4 0
文章推荐： javascript - 如何在移动设备上只显示桌面版本 - Blogger
文章推荐： ios - 未捕获的异常 : This class is not key value coding-compliant
文章推荐： ios - 为什么将对象追加到数组时会出现 nil 错误？
文章推荐： c# - 如何在 C# 代码中将 SQL 查询转换为 LINQ 形式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com