Javascript 以及如何隐藏一个特定的数据xxx

我有几个div，我想用js隐藏它们。但我的脚本只是隐藏了其中一个。我怎么能把它们都藏起来

function hide(id) {
  document.getElementById(id).style.display = "none";
}

hide("test");

---

我怎么能用数据类别装饰来隐藏元素呢？

ID应该是唯一的。这就是为什么getElementById返回1个结果，而不是结果数组。这是第一场比赛

而是使用一个类，如下所示：

<div class="hide-me">Hello</div>

---

querySelectorAll函数确实返回一个匹配数组，使用CSS选择器语法进行搜索。

getElementById仅选择具有相应属性id的元素。如果有多个元素具有相同id，它仍将仅返回一个

您需要做的是像这样使用class属性：

function hide(class) {
  var thingsToHide = document.getElementsByClassName(class); //Get all products class elements
   for (var i=0; i<thingsToHide.length; i++) {
      thingsToHide.item(i).style.display = "none";
   }
}

hide("product");

以及html：

<div id="test" data-studio="disney" data-month="mar" data-action="action" data-serie="serie" data-platform="disney+"  class="product">Dinner</div>
          <div id="test" data-category="first meal" class="product">First meal</div>
          <div id="test" data-category="garnish" class="product">Garnish</div>

---

Id应该是唯一的，试着分配类名-。使用一个明喻，这就像假装向所有电话号码相同的手机发送短信-谢谢兄弟。它起作用了

function hide(class) {
  var thingsToHide = document.getElementsByClassName(class); //Get all products class elements
   for (var i=0; i<thingsToHide.length; i++) {
      thingsToHide.item(i).style.display = "none";
   }
}

hide("product");

<div id="test" data-studio="disney" data-month="mar" data-action="action" data-serie="serie" data-platform="disney+"  class="product">Dinner</div>
          <div id="test" data-category="first meal" class="product">First meal</div>
          <div id="test" data-category="garnish" class="product">Garnish</div>