一个Javascript

Question

会喜欢一些帮助，我是JavaScript的新手，并且希望在一次通话中为一些语句做一些工作。

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语句。会喜欢有人帮我理解如何做到这一点。谢谢！

****** ADDED ******

以下是一些可以按要求提供帮助的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集合或＆＃34;节点列表＆＃34 ;那是＆＃34;类似数组＆＃34;对象），你不能使用它，所以计数的for循环是最合适的选择（除非你转换你的＆＃34;节点）列出＆＃34;到真正的数组 - - 另一个时间的主题。

接下来，您正在使用getElementsByClassName()，这将有效，但会返回＆＃34;直播＆＃34;节点列表，如果没有在正确的位置使用，可能会降低性能。使用querySelectorAll()可以更好地执行并完成相同的结果，但实际上更灵活，因为它允许您传递任何有效的CSS选择器。

以下是您的行动功能示例。查看代码中的注释，了解正在发生的事情。请注意，最初隐藏了硬编码的CSS集#group1 div和所有.param3 div s。当您单击按钮（并执行您的功能）时，这些元素的显示将会改变，最后一组元素的颜色也会改变。

＆＃13;

＆＃13;

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");
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;