在一行中按ID选择多个元素
select multiple elements by ID in one line
我想知道是否有更好/更干净的方法来完成我在下面的代码。
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";
}
我想只有一行,将取消隐藏所有的元素,如果可能的话,我已经尝试过document.getElementById("jobDescription" + "updateButton" + etc...).style.display = "block";
,但它不起作用。I am new to JavaScript.
给所有需要的元素一个类,并通过getElementsByClassName(..)
选择它们。
你可以使用一个循环:
var elements = ['jobDescription', 'updateButton', 'equipmentList', 'jobDesc', 'equipRan'];
for(i = 0; i < elements.length; i++) {
document.getElementById(elements[i]).style.display = "block";
}
试试这个,我相信它会在所有现代浏览器中工作:
<!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>
试试这个:
var toggle = ["jobDescription","updateButton","equipmentList","jobDesc","equipRan"],
l = toggle.length, i;
for( i=0; i<l; i++) document.getElementById(toggle[i]).style.display = "block";
或者,把所有这些元素放到一个容器中,然后切换。
这不是一行就能完成的。但是,使用jQuery可以为元素提供一个类,并使用一个漂亮的jQuery方法来操作它的样式。但是对于纯JS,你可以使用字符串数组(id),迭代它并设置具有这些id的元素的样式。
[ 'jobDescription', 'updateButton', 'equipmentList',
'jobDesc', 'equipRan' ].forEach(function( iden ) {
document.getElementById( iden ).style.display = "block";
});
相关文章:
- 在jquery中选择id以字符串开头的元素
- 使用regex选择ID元素
- Bootstrap Navbar在选择ID元素后未折叠
- 选择id中带有双点的元素,错误:“#octo:cat”不是有效的选择器
- jQuery 选择 # id 以 word 作为前缀,计数器作为后缀
- 在数据响应中选择 #id.html
- 如何根据“选择 ID”选项值更改表的行和列
- 从变量中选择id
- jQuery从逗号分隔的列表中选择ID
- 选择ID为另一个元素中属性的元素
- 在jquery中选择ID+任意数字
- 动态添加行表需要更改选择 id 标签
- 根据其父ID选择ID
- 选择ID中有句号的元素
- 根据标签选择id
- 在Javascript中使用循环选择id的数量
- 没有选择ID
- Javascript -在选择id时遇到麻烦
- 不能用Jquery从$.get() / $.load()函数中选择ID.请帮帮我
- 用于从表中选择ID的JavaScript