複数のFor文を1つのJavascriptで表示

Question

JavaScriptを使用していて、1回の呼び出しでいくつかの作業をしたいと思っています。

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'; 
}; 

問題は、1つのJavaScript呼び出しで複数のfor文を実行する方法がわかりません。私はこれを行う方法を理解するのを助けるために誰かを愛するでしょう。ありがとう！ここ******

を追加しました

******は、要求された

<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

として最大の問題は、あなたが複数の持っているということであるのに役立ちますいくつかのHTMLですreturnメイン関数のステートメントreturnステートメントが検出されると、現在実行中の関数は、指定した戻り値とともに、呼び出し元（最初に関数を呼び出したコード）にプログラムによる制御を戻します。主な機能では、最初のreturnの後には何も到達せず、戻り値sCIsも必要ありません。要するに、その機能はreturnのどちらにも存在する必要はありません。

また、ループを使用しています。これは、配列ではなく、Object構造（プロパティ名と値がある場合）を反復するためのものです。配列の場合、配列の途中に数えられるループはforです。真の配列では、組み込みの.forEach()ルーピングメソッドを使用することもできますが、技術的には真の配列がループしない（HTMLコレクションや「配列のような」オブジェクトである「ノードリスト」がある）ので、それを使用することはできませんので、 "ノードリスト"を真の配列に変換しないかぎり、forループが有効です。

次に、getElementsByClassName()を使用していますが、「ライブ」ノードリストが返され、正しいスポットで使用されないとパフォーマンスが低下する可能性があります。 querySelectorAll()を使用するとより良い結果が得られますが、有効なCSSセレクタを渡すことができるため、実際にはより柔軟性があります。

ここでは、実際に機能している機能の例を示します。起こっていることの説明については、コードのコメントを参照してください。ハードコードされたCSSは、最初に非表示にするには、#group1divとすべて.param3divを設定することに注意してください。ボタンをクリックして（機能を実行すると）、それらの要素の表示が変わり、最後の要素のグループの色も変わります。

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>