一個Javascript中有多個For語句

Question

希望獲得幫助，我是JavaScript的新手，並且希望在一次調用中處理for語句。

function showIndividuals(param1, param2, param3, param4) {

  show_visibility(param1);
  hide_visibility(param2);

  var sCls = document.getElementsByClassName(param3);
  for (var i in sCls) {
    sCls[i].style.display = 'block';
  }


  var person = document.getElementsByClassName(param4);
  for (var i in person) {
    person[i].style.color = '#ccc';
  }

};

function hide_visibility(id) {
  var e = document.getElementById(id);
  e.style.display = 'none';
};

function show_visibility(id) {
  var e = document.getElementById(id);
  e.style.display = 'block';
};

我要提出的問題是我不確定如何在一個JavaScript調用中運行多個for語句。 希望有人能幫助我了解如何執行此操作。 謝謝！

****** 添加 ******

這是一些HTML，可按要求提供幫助

<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-5">
    <i class="fa fa-circle-o" aria-hidden="true"></i>&nbsp; Jane Johnson 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <i class="fa fa-users blue" aria-hidden="true"></i>&nbsp; Executive Team (12)
</div>
<div class="col-sm-5 text-right">
    <div id="showindividuals"><a onclick="showIndividuals('hideindividuals','showindividuals','sigma-individuals','sigmabuttoncontainer-group')">Show Individuals</a></div>
    <div id="hideindividuals" style="display:none"><a onclick="">Hide Individuals</a></div>
</div>

<div class="col-sm-2">Header</div>
<div class="row col-sm-10">
    <div>
        <div>
            <button class="btn">A</button>
        </div>
    </div>
    <div>
        <div class="sigmabuttoncontainer-group">
            <i class="fa fa-users" aria-hidden="true"></i>
        </div>
    </div>
    <div class="sigma-individuals" style="display:none;">
        <div>
            1 - Stuff I want to show on click, there are multiple areas that use the same class within this page to show this information
        </div>
    </div>
</div>

  <div class="col-sm-2">Header 2</div>
<div class="row col-sm-10">
    <div>
        <div>
            <button class="btn">B</button>
        </div>
    </div>
    <div>
        <div class="sigmabuttoncontainer-group">
            <i class="fa fa-users" aria-hidden="true"></i>
        </div>
    </div>
    <div class="sigma-individuals" style="display:none;">
        <div>
            2 - Stuff I want to show on click, there are multiple areas that use the same class within this page to show this information
        </div>
    </div>
</div>

Answer 1

最大的問題是您在main函數中有多個return語句。 當遇到return語句時，當前正在運行的函數會將編程控制權以及您可能已指定的任何返回值返回給調用方（首先調用該函數的代碼）。 在您的main函數中，首次return之后的任何內容都永遠不會到達，甚至不需要sCIs的返回值。 簡而言之，該函數不需要return任何一個。

另外，您正在使用for/in循環，該循環用於迭代Object結構（有屬性名稱和值的地方），而不是數組。 對於數組，可以使用for循環來計數其遍歷數組的方式。 對於真正的數組，您還可以使用內置的.forEach()方法進行循環，但是，由於從技術上講，您沒有真正的數組可以循環（您擁有“類似數組”的HTML集合或“節點列表”對象），則不能使用它，因此計數的for循環是最合適的選擇（除非您將“節點列表”轉換為真實的數組-主題為下一次）。

接下來，您將使用getElementsByClassName() ，該方法將起作用，但是會返回“活動”節點列表，並且如果未在正確的位置使用它會降低性能。 使用querySelectorAll()可以更好地完成相同的結果，但實際上更靈活，因為它允許您傳遞任何有效的CSS選擇器。

這是您的功能實例。 查看代碼中的注釋，以了解發生的情況。 請注意，硬編碼的CSS將#group1 div和所有.param3 div為最初是隱藏的。 當您單擊按鈕（並執行功能）時，這些元素的顯示將發生變化，最后一組元素的顏色也將發生變化。

 function showIndividuals(param1, param2, param3, param4) { // call two other functions and pass them parameters from this funciton call show_visibility(param1); hide_visibility(param2); // Get a collection of all the elements that have the "param3" class var sCls = document.querySelectorAll(param3); // Loop through the collection (for/in loops are for objects not arrays) for (var i = 0; i < sCls.length; i++) { // As we encounter each element, change its style to display as a block element // This will do nothing when the element is already being displayed, but it will // cause the element to be rendered if it had been previously hidden sCls[i].style.display = 'block'; } // Get a collection of all the elements that have the "param4" class // Name your variables appropriately, since this will store a collection // name it with a pluralized variable. var people = document.querySelectorAll(param4); // Loop through the collection (for/in loops are for objects not arrays) for (var i = 0; i < people.length; i++) { // Change the element's foreground color people[i].style.color = '#ccc'; } }; function hide_visibility(id) { var e = document.getElementById(id); e.style.display = 'none'; }; function show_visibility(id) { var e = document.getElementById(id); e.style.display = 'block'; }; // There has to be something to trigger the functions. So in this example, we'll // do that via a button's click event // Get a reference to the button var btn = document.querySelector("button"); // Set the button's click event up to invoke your function: btn.addEventListener("click", function(){ showIndividuals("group1", "group2", ".param3", ".param4"); }); 

 /* Start the div with an id of: group1 and all the divs with a class of .param3 to be hidden: */ #group1, .param3 { display:none; } 

 <div id="group1"> <div class="param1">param 1 element</div> <div class="param1">param 1 element</div> <div class="param1">param 1 element</div> <div class="param1">param 1 element</div> </div> <div id="group2"> <div class="param2">param 2 element</div> <div class="param2">param 2 element</div> <div class="param2">param 2 element</div> <div class="param2">param 2 element</div> </div> <div class="param3">param 3 element</div> <div class="param3">param 3 element</div> <div class="param3">param 3 element</div> <div class="param3">param 3 element</div> <div class="param4">param 4 element</div> <div class="param4">param 4 element</div> <div class="param4">param 4 element</div> <div class="param4">param 4 element</div> <div><button>Click Me</button></div>