1

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

这是我的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>

如果您认为问题太简单，请不要投反对票，但请在这里给我您的帮助！！！先感谢您！！！

4

5 回答 5

3

你走在正确的轨道上，你只需要学习正确的语法来表达你想要表达的东西：

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](), ... 所以你可以把它放在onclick你的 HTML 中，或者你可以绑定来自 javascript 的事件。

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

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每次单击按钮时都会调用，而不是在创建函数时调用一次。效率稍低，但它有效。

于 2013-01-18T21:37:39.017 回答
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';}
   }
}
于 2013-01-18T21:38:53.517 回答
1

在这里，您可以在每次点击时使用此功能：

    <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>
于 2013-01-18T21:51:32.297 回答
0

您重新定义了相同的函数 ( function SCi) 八次。唯一保留的函数版本是最后定义的版本。按照您的代码，您只是在创建一个可以与第 8 个框一起使用的函数。

于 2013-01-18T21:37:10.027 回答
0

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

于 2013-01-18T21:36:04.637 回答