4

我想知道是否有更好/更清洁的方法来完成我在下面的代码中所做的事情。

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";了，但它不起作用。我是 JavaScript 新手。

4

5 回答 5

9

给所有需要的元素一个类并通过getElementsByClassName(..).

（也许使用 jQuery 做同样的事情，痛苦少得多）

于 2012-12-31T01:50:58.427 回答
5

你可以使用一个循环：

var elements = ['jobDescription', 'updateButton', 'equipmentList', 'jobDesc', 'equipRan'];

for(i = 0; i < elements.length; i++) {
   document.getElementById(elements[i]).style.display = "block";
}
于 2012-12-31T01:50:08.103 回答
1

试试这个，我相信它适用于所有现代浏览器：

<!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>
于 2015-05-28T15:15:48.240 回答
0

试试这个：

var toggle = ["jobDescription","updateButton","equipmentList","jobDesc","equipRan"],
    l = toggle.length, i;
for( i=0; i<l; i++) document.getElementById(toggle[i]).style.display = "block";

或者，将所有这些元素放在一个容器中，然后切换它。

于 2012-12-31T01:50:38.113 回答
0

这不是一行可以完成的事情。然而，使用 jQuery 可以给元素一个类并使用一个漂亮的 jQuery 方法来操作它的样式。但是对于纯 JS，您可以使用字符串数组（id），对其进行迭代并使用这些 id 设置元素的样式。

[ 'jobDescription', 'updateButton', 'equipmentList',
  'jobDesc', 'equipRan' ].forEach(function( iden ) {

    document.getElementById( iden ).style.display = "block";

});
于 2012-12-31T01:51:51.627 回答