1

我想隐藏所有名为“掩码”的 div

这是我的HTML：

<div id="first">
 <div id="firsttest"></div>
  <div class="one onehelp">
   <div id="mask">
    <div id="onetip"></div>
   </div>
   <div id="Div5"></div>
   <div id="resultone"></div>
  </div>
  <div class="two twohelp">
   <div id="mask">
    <div id="twotip"></div>
   </div>
   <div id="Div6"></div>
   <div id="resulttwo"></div>
  </div>
  <div class="three threehelp">
   <div id="mask">
    <div id="threetip"></div>
   </div>
   <div id="Div7"></div>
   <div id="resultthree"></div>
  </div>
</div>

我试图通过使用下面的 JS 代码来隐藏“掩码”，但它不适用于所有 div，仅适用于第一个。

var hidemask = document.getElementById("mask");
hidemask.style.display = "none";

有没有办法通过使用纯 Javascript 来隐藏它们。没有 jQuery。

4

3 回答 3

8

您不应该在 HTML 中使用重复的 ID，请考虑将其更改为一个类。

如果您更改id="mask"为class="mask"，那么您可以执行以下操作：

var hidemask = document.querySelectorAll(".mask");

for (var i = 0; i < hidemask.length; i++) {
    hidemask[i].style.display = "none";
}

或者对于仍处于石器时代的浏览器（IE7 及以下），您可以这样做：

    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + 'mask' + ' ') > -1) {
            elems[i].style.display = "none";
        }
    }
于 2013-10-01T22:29:29.477 回答
2

每个文档的id属性必须是唯一的。也许你可以用 做你想做的事class。所以你会有多个divs 像这样：

<div id="something" class="mask"></div>

然后你可以这样做：

var divsWithMask = document.querySelectorAll(".mask");
for(var i = 0; i < divsWithMark.length; i++) {
    divsWithMak[i].style.display = "none";
}
于 2013-10-01T22:30:32.893 回答
1

您不能多次分配相同的 ID。

但是您可以将属性类添加到 id 为“掩码”的 div 例如：

<div id="mask-or-something-else" class="mask">...</div>

并按此类选择所有元素：

var hidemask = document.getElementsByClassName("mask");
for(i = 0; i < hidemask.length; i++)
    hidemask[i].style.display = "none";
于 2013-10-01T22:31:20.023 回答