添加第二个参数时，Javascript函数将停止工作

Javascript function stops working when adding a second parameter

本文关键字：函数 停止工作 Javascript 第二个 参数 添加      更新时间：2024-01-13

我有下面的单参数JS函数，它隐藏/显示一个html表，并且在一个小异常的情况下正常工作-我需要点击两次才能显示所需的效果：

function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if(e.style.display != 'none')
            e.style.display = 'none';
       else
          e.style.display = 'table';
    }

现在，当我添加第二个参数并扩展函数以在两个img源路径之间切换时，它就不再工作了。Firebug控制台不提供任何错误消息或其他线索：

function toggle_visibility(id, arrow) 
    {
       var e = document.getElementById(id);
       var i = document.getElementById(arrow);
       if(e.style.display != 'none')
          e.style.display = 'none';
          i.src = 'img/arrowDownWhiteRight.bmp';
       else
          e.style.display = 'table';
          i.src = 'img/arrowDownWhite.bmp';
    }

我从中调用函数的html元素显示如下：

<tr id="trigger" class="toggle" onclick="toggle_visibility('collapsible1', 'img1')">

第二个参数的元素：

<td id="triggerArrow"><img id="img1" src="img/arrowDownWhiteRight.bmp"></td>

要隐藏/显示的元素（默认为"显示：无"）

<table class="collapsible" id="collapsible1">
    ...

您需要使用块：

function toggle_visibility(id, arrow) 
{
   var e = document.getElementById(id);
   var i = document.getElementById(arrow);
   if(e.style.display != 'none') {                 // <== {
      e.style.display = 'none';
      i.src = 'img/arrowDownWhiteRight.bmp';
   } else {                                        // <== } and {
      e.style.display = 'table';
      i.src = 'img/arrowDownWhite.bmp';
   }                                               // } <==
}

在JavaScript中，与大多数从B（C、C++、C#、Java、JavaScript…）语法派生而来的语言一样，缩进被完全忽略，并且只有一个语句在if、while或else等控制结构之后被附加到该控制结构；因此，如果将多个语句附加到它们，则使用块语句（spec，MDN）{ ... }将这些语句分组在一起。

因此：

if (condition)
    doThis();
    doThat();   // Misleading indentation, doThat *always* runs

真的是

if (condition)
    doThis();
doThat();

其中添加一个块使两个调用都取决于条件：

if (condition) {
    doThis();
    doThat();   // Only happens if the condition is true now
}

{和}的位置（在同一行，在它们自己的行上，等等）完全取决于您的风格。我在上面第一个代码块中显示的样式非常非常常见，但根据您为函数放置{的位置，您可能更喜欢其他常见的样式（尽管在其他B派生语言中比在JavaScript中更常见）：

function toggle_visibility(id, arrow) 
{
   var e = document.getElementById(id);
   var i = document.getElementById(arrow);
   if(e.style.display != 'none')
   {
      e.style.display = 'none';
      i.src = 'img/arrowDownWhiteRight.bmp';
   }
   else
   {
      e.style.display = 'table';
      i.src = 'img/arrowDownWhite.bmp';
   }
}

无论哪种方式都无关紧要，做同样的事情。

如果您想在If之后执行2个或多个语句，请使用大括号对它们进行分组：

function toggle_visibility(id, arrow){
  var e = document.getElementById(id);
  var i = document.getElementById(arrow);
  if(e.style.display != 'none'){
    e.style.display = 'none';
    i.src = 'img/arrowDownWhiteRight.bmp';
  } else{
    e.style.display = 'table';
    i.src = 'img/arrowDownWhite.bmp';
  }
}
相关文章：