通過ID在一行中選擇多個元素

我想知道是否有更好/更乾淨的方式來完成我在下面的代碼中的內容。通過ID在一行中選擇多個元素

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新手。

來源

2012-12-31 Yamaha32088

你應該認真考慮[jQuery的]（http://jquery.com/）。 –

如果你的目標是現代瀏覽器，你也可以使用['document.querySelectorAll']（https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll）（儘管你仍然需要循環瀏覽他們）。 –

添加一個CSS類到元素，然後全部按類切換它們 – scunliffe

給所有你需要的元素一個類，並通過getElementsByClassName(..)選擇它們。

（也許使用jQuery做同樣的事情用少得多的疼痛）

來源

2012-12-31 01:50:58 Jack

+1，這個解決方案比一個循環更好:) –

@HunterMcMillen你仍然需要循環getElementsByClassName，因爲它返回一個節點列表 – 0x499602D2

@David true，但是你消除了硬編碼的字符串數組，這使得他的代碼更加清晰。 –

你可以使用一個循環：

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

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

來源

2012-12-31 01:50:08

試試這個：

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-31 01:50:38

這是不是可以在一個線來完成。但是，使用jQuery可以給元素一個類並使用漂亮的jQuery方法操作它的樣式。但是對於純JS，你可以使用一個字符串數組（id），迭代它並用這些id設置元素的樣式。

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

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

});

來源

2012-12-31 01:51:51 0x499602D2

試試這個，我相信它會在所有現代瀏覽器的工作：

<!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-28 15:15:48 bvmCoder

通過ID在一行中選擇多個元素

回答

相關問題