一个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>