如何为多个div元素循环相同的javascript代码？

Question

I have made three "boxes" and each box contains a button. When I click the button, box hiding, when click again, box appears.

This is my html code:

<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC1();" class="something">&nbsp;</div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC2();" class="something">&nbsp;</div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC3();" class="something">&nbsp;</div>
</div>

This is my javascript code:

<script type="text/javascript">    
function SC1(){

  var SC1_A = document.getElementById('SC1_A_);
  var SC1_B = document.getElementById('SC1_B_);

  if (SC1_A.style.display == 'block' || SC1_A.style.display == ''){
      SC1_A.className      = 'something';
      SC1_B.className      = 'something else';}   
else {SC1_A.className      = 'something else';
      SC1_B.className      = 'something';}
     }
     }
</script>

The example above works, but I have to make three similar scripts for each button. So I though to make something like this script below, using for loop. As you can imagine it didn't work. Any idea how can I make it work???

<script type="text/javascript">

for (i=1; i<10; i++){

function SCi(){

  var SCi_A = document.getElementById('SC'+i+'_A_');
  var SCi_B = document.getElementById('SC'+i+'_B_');

  if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
      SCi_A.className      = 'something';
      SCi_B.className      = 'something else';}   
else {SCi_A.className      = 'something else';
      SCi_B.className      = 'something';}
     }
     }
</script>

Please don't down-vote if you think question is too easy, but just give me your help here!!! Thank you in advance!!!

Answer 1

You're on the right track, you just need to learn the right syntax for what you are trying to express:

var SC = [];

First off, to have a lot of different functions, so instead of attempting to name them differently (which you were trying to do), we are going to just store each function in a different index in the SC array.

for (var i = 1; i < 10; i++) {
    SC[i] = (function () {
        var SC_A = document.getElementById('SC' + i + '_A_');
        var SC_B = document.getElementById('SC' + i + '_B_');

        return function () {
            if (SC_A.style.display === 'block' || SC_A.style.display === '') {
                SC_A.className = 'something';
                SC_B.className = 'something else';
            } else {
                SC_A.className = 'something else';
                SC_B.className = 'something';
            }
        }
    })();
}

Now, to call these functions you would do SC[1]() , SC[2]() , ... So you can either put that in each onclick in your HTML, or you could bind the events from the javascript.

---

Edit: I forgot to mention this because it isn't directly related to the syntax of the code, but the calls to 'document.getElementById will not work until the document is fully loaded. So if you just put the script directly between to will not work until the document is fully loaded. So if you just put the script directly between to ` tags it won't work. You have two choices. You either can keep the current code, but run it when the page loads . Or, you could restructure the code like this:

var SC = [];
for (var i = 1; i < 10; i++) {
    SC[i] = (function (i) {
        return function () {
            var SC_A = document.getElementById('SC' + i + '_A_');
            var SC_B = document.getElementById('SC' + i + '_B_');

            if (SC_A.style.display === 'block' || SC_A.style.display === '') {
                SC_A.className = 'something';
                SC_B.className = 'something else';
            } else {
                SC_A.className = 'something else';
                SC_B.className = 'something';
            }
        }
    })(i);
}

What's happening here is you are calling document.getElementById every time the button is clicked, instead of just once when the function is created. Slightly less efficient, but it works.

Answer 2

You define each section on the page as calling the one function and passing in the name of the other .

<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC('SC1_A_');" class="something">&nbsp;</div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC('SC2_A_');" class="something">&nbsp;</div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC('SC3_A_');" class="something">&nbsp;</div>
</div>

There is just one function used for all of them

function SC(nameOfA){

   var SCi_A = document.getElementById(nameOfA);
   var SCi_B = this;

   if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
       SCi_A.className      = 'something';
       SCi_B.className      = 'something else';
   } else {
       SCi_A.className      = 'something else';
       SCi_B.className      = 'something';}
   }
}

Answer 3

here you can use this function on every click:

    <div id="SC1_A_"> <!-- BOX -->
         <div id="SC1_B_" onClick="SC(event)" class="something">&nbsp;</div> <!-- BUTTON -->
    </div>
<script type="text/javascript">
    function SC(event){
        var SCA = event.currentTarget.parentNode;
        var SCB = event.currentTarget;

        ................
    }
</script>

Answer 4

Your code is defining a function named SCi 8 times. I think if you swap the first two lines you will get what you want.

Answer 5

You're redefining the same function ( function SCi ) eight times. The only version of the function that is retained is the version that's defined last. Going by your code, you're only creating a function that can work with the 8th box.