HTML/Javascript/Contact Form 7：一次隐藏多个标签的最简单方法答案

【问题标题】：HTML/Jscript/Contact Form 7: Easiest way to hide several labels at onceHTML/Javascript/Contact Form 7：一次隐藏多个标签的最简单方法
【发布时间】：2018-04-02 13:50:35
【问题描述】：

我正在处理以下代码，我想找到一种简单的方法来隐藏 Text2 之后（包括）Text2 之后的所有标签，只要在下拉菜单上选择 Option1 或 Option2。我尝试使用类元素，但它们似乎破坏了我的脚本，现在我只能隐藏一个标签（text5）。你介意帮助我吗？

<p><label>Text1</label> [select* id:mobileProvider "Option1" "Option2"</p>
<p><label>Text2</label></p>
<p><label>Text3</label></p>
<p><label>Text4</label></p>
<p><label id="sub">Text5</label></p>

<script language="javascript" type="text/javascript">
  document.getElementById("mobileProvider").addEventListener("change", displayTextField);

  function displayTextField() {
    var dropDownText = document.getElementById("mobileProvider").value;
    if (dropDownText == "Option1") {
      document.getElementById("sub").style.display = 'none';
    } else if (dropDownText == "Option2") {
      document.getElementById("sub").style.display = 'none';
    } else {
      document.getElementById("sub").style.display = 'inline';
    }
  }
</script>

【问题讨论】：

请在编辑器中使用sn-p工具<>创建minimal reproducible example。
稍微改了一下，虽然你因为它而贬低它很糟糕，但代码并没有那么复杂。
document.getElementsByClass("hid").style.display返回什么样的值？
显示标签数组？
没有。尝试使用浏览器的开发者工具。

标签： javascript html wordpress contact-form-7

【解决方案1】：

我将每个段落中的“类”标签更改为“隐藏”，并在我的脚本中添加了下一行，它成功了。

var hide = document.getElementsByClassName('hid'),i = hide.length;
while(i--) { 
    hide[i].style.display= 'none'; }

【讨论】：