Question

我想使一些文本不可见并且使某些标签可见。单击底部后，我的文本将消失，但不会显示标签。我该怎么办？

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

Answer 1

这是您想要的吗？

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 = "inline";
  }
}

<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>

  </div>
</div>

如果是，请注意，除了inline之外，display属性还具有多个可能的值。请阅读有关CSS布局的信息。以下是帮助您入门的链接：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

Answer 2

这是因为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>

隐藏的标签不可见

2 个答案: