Question

我已经得到以下单参数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>

要隐藏/显示的元素（默认为＆＃34;显示：无＆＃34;）

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

Answer 1

您需要使用块：

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

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

Answer 2

如果要在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';
  }
}

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

2 个答案: