Question

我制作了三个“盒子”，每个盒子都包含一个按钮。当我单击按钮，框隐藏，再次单击时，框出现。

这是我的HTML代码：

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

这是我的javascript代码：

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

上面的示例有效，但我必须为每个按钮制作三个类似的脚本。所以我想在下面制作类似这样的脚本，使用for循环。你可以想象它没有用。知道我怎么能让它发挥作用???

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

如果您认为问题太容易，请不要投票，但请在这里给我你的帮助！提前谢谢!!!

Answer 1

你走在正确的轨道上，你只需要学习正在尝试表达的语法：

var SC = [];

首先，要有很多不同的功能，所以我们不是试图以不同的方式命名它们（你试图这样做），而是将每个函数存储在SC的不同索引中阵列。

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

现在，要调用这些函数，您可以执行SC[1]()，SC[2]()，...因此，您可以将其放在HTML中的每个onclick中，也可以绑定事件来自javascript。

编辑：我忘记提及这一点，因为它与代码的语法没有直接关系，但调用'document.getElementById will not work until the document is fully loaded. So if you just put the script directly between to`标签它不起作用。你有两个选择。您可以保留当前代码，但run it when the page loads。或者，您可以像这样重构代码：

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

这里发生的是每次单击按钮时调用document.getElementById，而不是在创建函数时调用一次。效率稍差，但它确实有效。

Answer 2

您可以将页面上的每个部分定义为调用一个函数并传入另一个函数的名称。

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

只有一个功能用于所有这些功能

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

这里你可以在每次点击时使用这个功能：

    <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

您的代码定义了一个名为SCi的函数8次。我想如果换掉前两行，你就会得到你想要的东西。

Answer 5

您正在重新定义相同的功能（function SCi）八次。保留的函数的唯一版本是最后定义的版本。按照你的代码，你只是创建一个可以使用第8个框的函数。

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

5 个答案: