javascript 在一行中按 ID 选择多个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14096600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select multiple elements by ID in one line
提问by Yamaha32088
I would like to know if there is a better/cleaner way to accomplish what I have in the code below.
我想知道是否有更好/更干净的方法来完成我在下面的代码中所拥有的内容。
var updateJob = function(){
document.getElementById("jobDescription").style.display = "block";
document.getElementById("updateButton").style.display = "block";
document.getElementById("equipmentList").style.display = "block";
document.getElementById("jobDesc").style.display = "block";
document.getElementById("equipRan").style.display = "block";
}
I would like to have just one line that will unhide all of the elements if its possible I have tried document.getElementById("jobDescription" + "updateButton" + etc...).style.display = "block";but it does not work. I am new to JavaScript.
如果可能的话，我希望只有一行可以取消隐藏所有元素，我已经尝试过，document.getElementById("jobDescription" + "updateButton" + etc...).style.display = "block";但它不起作用。我是 JavaScript 的新手。
回答by Hyman
Give all your required elements a class and select them through getElementsByClassName(..).
为所有需要的元素指定一个类并通过 选择它们getElementsByClassName(..)。
(and maybe use jQuery to do the same thing with much less pain)
（也许可以使用 jQuery 以更少的痛苦来做同样的事情）
回答by Hunter McMillen
You could use a loop:
你可以使用一个循环：
var elements = ['jobDescription', 'updateButton', 'equipmentList', 'jobDesc', 'equipRan'];
for(i = 0; i < elements.length; i++) {
document.getElementById(elements[i]).style.display = "block";
}
回答by Niet the Dark Absol
Try this:
试试这个：
var toggle = ["jobDescription","updateButton","equipmentList","jobDesc","equipRan"],
l = toggle.length, i;
for( i=0; i<l; i++) document.getElementById(toggle[i]).style.display = "block";
Alternatively, put all those elements in one container and just toggle that.
或者，将所有这些元素放在一个容器中，然后切换它。
回答by 0x499602D2
This is not something that can be done in one line. However, with jQuery it's possible to give the elements a class and manipulate its style with a nifty jQuery method. But as for pure JS you can use an array of strings (the ids), iterate it and set the style of the elements with those ids.
这不是一行可以完成的事情。然而，使用 jQuery 可以给元素一个类并使用一个漂亮的 jQuery 方法来操纵它的样式。但是对于纯 JS，您可以使用字符串数组（id），对其进行迭代并使用这些 id 设置元素的样式。
[ 'jobDescription', 'updateButton', 'equipmentList',
'jobDesc', 'equipRan' ].forEach(function( iden ) {
document.getElementById( iden ).style.display = "block";
});
回答by bvmCoder
Try this and I am sure it will work in all modern browsers:
试试这个，我相信它可以在所有现代浏览器中工作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>For Loop Element</title>
</head>
<body>
<div id="divOne">
<p id="paraOne">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="paraTwo">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p id="paraTre">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="divTwo">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<script>
var allElem = document.querySelectorAll('#divOne, #paraOne, #paraTwo, #paraTre,#divTwo');
console.log(allElem);
for(var i = 0; i < allElem.length; i += 1)
{
allElem[i].style.border= '1px solid #002D55';
}
</script>
</body>
</html>
