Question

是否可以在不使用对象或数组的情况下display: none查询列表？

这是一个伪代码，其中包含我想要选择的查询列表并以最小的方式隐藏：

(function fbPurity () {
let hide = {
    document.querySelector("#mako");
    document.querySelector("#gaga");
    document.querySelector("._top");
    document.querySelector(".yo");
    document.querySelector(".col");
}

hide.style.display = "none";
})();

以下列方式隐藏这些内容有效，但是当您处理大约20-30个查询的列表时，这些内容可能会重复且效率低下（因为您将有大约60行来隐藏这些查询）。

let annoyingColumn = document.querySelector(".col");    
annoyingColoumn.style.display = "none";

为什么我不喜欢在这种情况下使用对象或数组：

对象和数组需要我使用属性或键，并用引号标记这些及其值。在我看来，这将冗余地延长代码，而我只想要一个简单的列表。

我的问题：

对于一个简单的querySelectors列表，我应该使用什么，在一个命令中都有display: none（如在伪代码中）？

Answer 1

document.querySelectorAll返回具有forEach的NodeList，所以：

document.querySelectorAll("#mako,#gaga,._top,.yo,.col").forEach(function(el) {
   el.style.display = "none";
});

Answer 2

检查出来：

function hideCollection(selector){
  var a = document.querySelectorAll(selector);
  for(var i=0,l=a.length; i<l; i++){
    a[i].style.display = 'none';
  }
  return a;
}
hideCollection('.col');

Answer 3

你可以创建一个小函数，它接受一个选择器并隐藏相应的元素，然后使用一个简单的选择器数组并调用forEach传递给它的那个函数。像这样：

function hide(selector) {
    document.querySelector(selector).style.display = "none";
}

["#mako", "#gaga", "._top", ".yo", ".col"].forEach(hide);

Answer 4

为什么不这样呢：

let hide = ["#mako", "#gaga", "._top", ".yo", ".col"];
$(hide.join(",")).hide();

是否可以显示：none没有使用对象或数组的查询列表？

4 个答案: