javascript - 测试 DIV 是否仅显示第二次的功能

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

预期的行为:

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

只有在您第一次单击所有三个按钮后，这才会按预期工作。第一次执行以下操作(并且可以通过刷新页面重复):

单击按钮“mySol”使 div 我的解决方案可见单击按钮“YASS”使 div My solution 可见并使 div YASS solution 可见单击“Tak”按钮使 divs My solution 和 YASS solution 可见，并使 div Takaken solution 可见单击按钮“mySol”使 div 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>

最佳答案

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>

关于javascript - 测试 DIV 是否仅显示第二次的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32555812/

javascript - 测试 DIV 是否仅显示第二次的功能

上一篇：javascript - 单击时在 FullCalendar 中添加事件

下一篇：html - 禁用按钮在 Edge 浏览器上是可点击的