测试 DIV 是否显示的功能仅在第二次有效答案

【问题标题】：Function that tests if DIV is showing only works the second time测试 DIV 是否显示的功能仅在第二次有效
【发布时间】：2015-09-14 10:15:27
【问题描述】：

这个问题太具体了，我不确定任何搜索都能找到类似的答案，所以我在问，好像这是一个新问题。

预期行为：

单击按钮“mySol”使 div 我的解决方案可见
单击“YASS”按钮使 div 我的解决方案隐藏并且 div YASS 解决方案可见
单击“Tak”按钮使 div YASS 解决方案隐藏并且 div Takaken 解决方案可见

这可以按预期工作，仅在您第一次单击所有三个按钮之后。第一次通过执行以下操作（可通过刷新页面重复）：

单击按钮“mySol”使 div 我的解决方案可见单击按钮“YASS”使 div 我的解决方案可见并使 div YASS 解决方案可见单击按钮“Tak”使 div 我的解决方案和 YASS 解决方案可见，并使 div Takaken 解决方案可见单击按钮“mySol”使 divs YASS 解决方案和 Takaken 解决方案可见，并使 div 我的解决方案隐藏单击按钮“YASS”使 div Takaken 解决方案可见并隐藏 div YASS 解决方案单击按钮“Tak”使 div Takaken 解决方案隐藏

这些可以按任何顺序完成，结果相同。再次隐藏最后一个 div 后，该功能正常工作，一次可见一个 div。我不明白是什么导致了这个问题，需要一些帮助来纠正它。

感谢任何帮助。

代码如下：

      function visInvis(id) {
        var a = document.getElementById('mySol');
        var b = document.getElementById('YASS');
        var c = document.getElementById('Tak');
        var e = document.getElementById(id);
        if(e == a && e.style.display == 'none') {
          b.style.display = 'none';
          c.style.display = 'none';
        }
        if(e == b && e.style.display == 'none') {
          a.style.display = 'none';
          c.style.display = 'none';
        }
        if(e == c && e.style.display == 'none') {
          a.style.display = 'none';
          b.style.display = 'none';
        }
        if(e.style.display == 'block')
          e.style.display = 'none';
        else
          e.style.display = 'block';
      }

      #mySol { display: none; }
      #YASS { display: none; }
      #Tak { display: none; }

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>Sample Solution Page</TITLE>
  </HEAD>
  <BODY>
    <TABLE align="left" valign="top" width="16%">
      <TR><TH align="left" colspan="2">Puzzle Name</TH></TR>
      <TR><TD>Width:</TD><TH width="50%">0</TH></TR>
      <TR><TD>Height:</TD><TH width="50%">0</TH></TR>
      <TR><TD>Boxes/Goals:</TD><TH width="50%">0</TH></TR>
      <TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution"></TD></TR>
      <TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
      <TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution"></TD></TR>
      <TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
      <TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution"></TD></TR>
      <TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
    </TABLE>
    <TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
      <CAPTION align="top"><B>Solution</B></CAPTION>
      <TR><TD valign="top">
        <DIV id=mySol>My Solution</DIV>
        <DIV id=YASS>YASS Solution</DIV>
        <DIV id=Tak>Takaken Solution</DIV>
      </TD></TR>
    </TABLE>
  </BODY>
</HTML>

【问题讨论】：

标签： javascript html css

【解决方案1】：

e.style.display 仅包含使用内联 style="display: xxx" 属性设置的样式，不包含从 CSS 规则继承的样式。这就是为什么您的代码第一次不起作用的原因。

使用getComputedStyle(e).getPropertyValue('display')。

function visInvis(id) {
  var a = document.getElementById('mySol');
  var b = document.getElementById('YASS');
  var c = document.getElementById('Tak');
  var e = document.getElementById(id);
  var eStyle = getComputedStyle(e).getPropertyValue('display');
  if (eStyle == 'none') {
    if (e == a) {
      b.style.display = 'none';
      c.style.display = 'none';
    } else if (e == b) {
      a.style.display = 'none';
      c.style.display = 'none';
    } else if (e == c) {
      a.style.display = 'none';
      b.style.display = 'none';
    }
    e.style.display = 'block';
  } else {
    e.style.display = 'none';
  }
}

#mySol {
  display: none;
}
#YASS {
  display: none;
}
#Tak {
  display: none;
}

<!DOCTYPE HTML>
<HTML>

<HEAD>
  <TITLE>Sample Solution Page</TITLE>
</HEAD>

<BODY>
  <TABLE align="left" valign="top" width="16%">
    <TR>
      <TH align="left" colspan="2">Puzzle Name</TH>
    </TR>
    <TR>
      <TD>Width:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Height:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Boxes/Goals:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
  </TABLE>
  <TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
    <CAPTION align="top">
      <B>Solution</B>
    </CAPTION>
    <TR>
      <TD valign="top">
        <DIV id=mySol>My Solution</DIV>
        <DIV id=YASS>YASS Solution</DIV>
        <DIV id=Tak>Takaken Solution</DIV>
      </TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

【讨论】：

我需要用这个函数替换所有的 a/b/c/e.style.display 实例吗？
在 if 条件以及赋值语句中？
你只需要在读取样式的时候做，不需要设置——设置一个计算的样式是没有意义的，它是通过合并所有的CSS和内联样式来计算的。
我在 if 条件下替换了 e.style.display 并没有什么区别。更改设置版本破坏了一切，我想是因为它是获取而不是设置。如果我在标签中使用内联样式而不是在头部中使用样式标签设置初始状态会有所不同吗？
我刚刚告诉你，在设置代码中这样做是没有意义的。无论如何，看看我的回答，它对我有用。

【解决方案2】：

以下代码可能对您有所帮助。

   function visInvis(id) {
       var a = document.getElementById('mySol');
       var b = document.getElementById('YASS');
       var c = document.getElementById('Tak');
       var e = document.getElementById(id);

       var eStyle = getComputedStyle(e).getPropertyValue('display');        

       var display = eStyle == 'none' ? 'block' : 'none';       
       a.style.display = b.style.display = c.style.display = 'none'
       e.style.display = display;
   }

【讨论】：

如果您单击已显示的 DIV 的按钮，它应该隐藏它。您的代码无法处理这种情况。
是的，错过了。现在它将按预期工作。感谢您的代码行 var eStyle = getComputedStyle(e).getPropertyValue('display');

【解决方案3】：

浏览器似乎没有将显示设置为none，而是设置为空字符串''。因此该功能可以固定如下：

function visInvis(id) {
  var e = document.getElementById(id);
  var eStyle = e.style.display;
  // all off
  document.getElementById('mySol').style.display = '';
  document.getElementById('YASS').style.display = '';
  document.getElementById('Tak').style.display = '';
  // set style to oposite of the original value
  e.style.display = (eStyle == 'block') ? '' : 'block';
}

#mySol {
  display: none;
}
#YASS {
  display: none;
}
#Tak {
  display: none;
}

<!DOCTYPE HTML>
<HTML>

<HEAD>
  <TITLE>Sample Solution Page</TITLE>
</HEAD>

<BODY>
  <TABLE align="left" valign="top" width="16%">
    <TR>
      <TH align="left" colspan="2">Puzzle Name</TH>
    </TR>
    <TR>
      <TD>Width:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Height:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Boxes/Goals:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
  </TABLE>
  <TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
    <CAPTION align="top">
      <B>Solution</B>
    </CAPTION>
    <TR>
      <TD valign="top">
        <DIV id=mySol>My Solution</DIV>
        <DIV id=YASS>YASS Solution</DIV>
        <DIV id=Tak>Takaken Solution</DIV>
      </TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

【讨论】：

e 包含调用document.getElementById(id) 的结果，因此它将是a、b 或c 中的元素之一。
你的回答还是受制于他原来的问题：你不能使用.style来获取继承自CSS的样式。
我已经检查过了，它工作正常。解释见帖子。
你能把你的答案变成一个堆栈 sn-p 来证明它有效吗？
我明白了。因为eStyle 第一次是undefined，所以它是有效的，所以eStyle == 'block' 是假的。