Javascript 在一行中按ID选择多个图元_Javascript

Javascript 在一行中按ID选择多个图元

javascript

Javascript 在一行中按ID选择多个图元,javascript,Javascript,我想知道是否有更好/更干净的方法来完成我在下面代码中的工作 var updateJob = function(){ document.getElementById("jobDescription").style.display = "block"; document.getElementById("updateButton").style.display = "block"; document.getElementById("equipmentList").style.d

我想知道是否有更好/更干净的方法来完成我在下面代码中的工作

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（“作业描述”+“更新按钮”+等等。）.style.display=“块”但它不起作用。我是JavaScript新手。
您可以使用循环：
var elements = ['jobDescription', 'updateButton', 'equipmentList', 'jobDesc', 'equipRan'];

for(i = 0; i < elements.length; i++) {
   document.getElementById(elements[i]).style.display = "block";
}

var元素=['jobDescription'，'updateButton'，'equipmentList'，'jobDesc'，'equipmran']；
对于（i=0；i
试试这个：
var toggle = ["jobDescription","updateButton","equipmentList","jobDesc","equipRan"],
    l = toggle.length, i;
for( i=0; i<l; i++) document.getElementById(toggle[i]).style.display = "block";

var toggle=[“作业描述”、“更新按钮”、“设备列表”、“作业描述”、“设备运行”]，
l=长度，i；
对于（i=0；i给所有需要的元素一个类，并通过getElementsByClassName（..）
选择它们
（也许使用jQuery做同样的事情要省力得多）
这不是一行就能完成的事情。但是，使用jQuery可以给元素一个类，并使用漂亮的jQuery方法操纵其样式。但是对于纯JS，可以使用字符串数组（ID），对其进行迭代，并使用这些ID设置元素的样式
[ 'jobDescription', 'updateButton', 'equipmentList',
  'jobDesc', 'equipRan' ].forEach(function( iden ) {

    document.getElementById( iden ).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>


For循环元素
它不仅存活了五个世纪，而且还跨越到了电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件而流行
许多桌面出版软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时是偶然的，有时是故意的（注入幽默等）
它不仅存活了五个世纪，而且还跨越到了电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件而流行
许多桌面出版软件包和网页编辑器现在使用Lorem Ipsum作为默认的模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时是偶然的，有时是故意的（注入幽默等）。
var allegem=document.queryselectoral（'divOne，'paraOne，'paraTwo，'paraTre，'divTwo'）；
控制台日志（等位基因）；
对于（变量i=0；i
如果您的目标是现代浏览器，您应该认真研究。或者使用（尽管您仍然需要循环浏览）。向元素添加CSS类，然后通过class@HunterMcMillen您仍然需要使用getElementsByClassName循环，因为它返回一个nodelist@David是的，但是您消除了硬编码的字符串数组，这使他的代码更干净。