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

时间：2015-09-14 00:21:03

标签： javascript html css

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

预期的行为：

  • 点击按钮＆＃39; mySol＆＃39;使div我的解决方案可见
  • 点击按钮＆＃39; YASS＆＃39;使div隐藏我的解决方案并显示可见的YASS解决方案
  • 点击按钮＆＃39;德＆＃39;使div YASS解决方案隐藏，并使div Takaken解决方案可见

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

点击按钮＆＃39; mySol＆＃39;使div我的解决方案可见 点击按钮＆＃39; YASS＆＃39;离开div我的解决方案可见并使div YASS解决方案可见 点击按钮＆＃39;德＆＃39;离开divs我的解决方案和YASS解决方案可见，并使div Takaken解决方案可见 点击按钮＆＃39; mySol＆＃39;离开div的YASS解决方案和Takaken解决方案可见并使div我的解决方案隐藏 点击按钮＆＃39; YASS＆＃39;离开div Takaken解决方案可见并使div YASS解决方案隐藏 点击按钮＆＃39;德＆＃39;让div Takaken解决方案隐藏

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

感谢任何帮助。

以下是代码：

＆＃13;
＆＃13; 
      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';
      }
＆＃13; 
      #mySol { display: none; }
      #YASS { display: none; }
      #Tak { display: none; }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：6)

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>

答案 1 :(得分：3)

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

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

答案 2 :(得分：0)

浏览器似乎没有将显示设置为ViewHolder，而是将字符串public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { // Your view fields here public ViewHolder(View itemLayoutView) { super(itemLayoutView); // Assign view fields itemLayoutView.setOnClickListener(this); } @Override public void onClick(View v) { // Do your thing here } } 清空。因此，该功能可以修复如下：

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

相关问题
最新问题