Question

我在style属性中将div标签的显示设置为none，之后我将其设置为基于on-click功能显示。问题是，当我点击点击功能时，它会显示一秒钟，然后再次关闭。请通过并告诉我哪里出错。

   <?php error_reporting(0); 
 $val1=0;
 $irate=0;
 $node=0;

 ?>
<html>
<head>

<link href="style.css" />
<style type="text/css">
#inputdiv
{
-webkit-box-shadow: 3px 3px 14px 7px #d1dcf7;
box-shadow: 3px 3px 14px 7px #d1dcf7;
}
#master
{
-webkit-box-shadow: 3px 3px 14px 7px #d1dcf7;
box-shadow: 3px 3px 14px 7px #d1dcf7;
}
#node
{
-webkit-box-shadow: 3px 3px 14px 7px #d1dcf7;
box-shadow: 3px 3px 14px 7px #d1dcf7;
}
html
{
overflow:hidden;
}

body
{
height:100%;
width:100%;
overflow:hidden;
background:url(images/bg.png);
}

#logo
{
width:100%;
height:20%;
border:0px solid black;
}



</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>
<body>
<div id="logo">
<img src="images/white.png" style="width:100px;height:100px;position:relative; left:35em"/>
</div>
<hr style="width:100%; height:1px"></hr>
<form action="byte.php" method="post">
<div id="inputdiv" style="position:absolute; left:29em;top:10em">
<select>
<option value="1">Daily</option>
<option value="2">Yearly</option>
</select>
<table>
<tr><td>Total data</td><td><input type="text" name="tdata"></td></tr>
<tr><td>Growth rate</td><td><input type="text" name="growth"></td></tr>
<tr><td>Duration</td><td><select name="duration">
                            <option  value="1">1 year</option>
                            <option  value="2">2 years</option>
                            <option  value="3">3 years</option>
                            <option  value="4">4 years</option>
                            <option  value="5">5 years</option>
                        </select>
                                   </td></tr>
<tr><td>Ingestion data</td><td><?php $total=$_POST['tdata'];
                                     $growth=$_POST['growth'];
                                     $duration=$_POST['duration'];
                                     $irate=($total)+($growth*$duration);
                                     echo $irate;
                                     ?>
                                                      </td></tr>
<tr><td>Raw consumption:</td><td><?php echo $irate*3; ?></td></tr>
<tr><td>Node raw storage:</td><td>24TB</td></tr>
<tr><td>MapReduce temporary space reserve</td><td>25%</td></tr>
<tr><td>Node-usable raw storage</td><td>18TB</td></tr>
<tr><td>1year(flat growth)</td><td><?php $val1=$_POST['irate'];$node=(round(($irate*3)/24)); echo (round(($irate*3)/24))." nodes";?></td></tr>
</table>
    <div id="master" style="width:300px;position:absolute; left:15em;top:25em;display:none">
   <table border="1" width="100%">
    <tr><td>CPU</td><td width="100%"> 2*6 Core 2.9 Ghz/15 MB cache</td></tr>
    <tr><td>Memory</td><td width="100%"> 64GB DDR3-1600 ECC</td></tr>
    <tr><td>Disk Controller</td><td width="100%"> SAS 6Gb/s</td></tr>
    <tr><td>Disks</td><td width="100%"> 12*2/3 TB LFF SATA II 7200 RPM</td></tr>
    <tr><td>Network Controller</td><td> 2*1Gb Ethernet</td></tr>
    </table>
    </div>
    <div id="node" style="width:300px;position:absolute; left:35em;top:25em;display:none">
    <table border="1" width="100%">
    <tr><td>CPU</td><td width="100%"> 2*6 Core 2.9 Ghz/15 MB cache</td></tr>
    <tr><td>Memory</td><td width="100%"> 64GB DDR3-1600 ECC</td></tr>
    <tr><td>Disk Controller</td><td width="100%"> SAS 6Gb/s</td></tr>
    <tr><td>Disks</td><td width="100%"> 12*2/3 TB LFF SATA II 7200 RPM</td></tr>
    <tr><td>Network Controller</td><td> 2*1Gb Ethernet</td></tr>
    </table>
    </div>
<input type="submit" onclick="hideshow()" value="submit">
</div>

</form>
<br>

</body>
<script>
function check(){
var node=<?php echo $node; ?>;
console.log(node);
//document.getElementbyId("master").style.display="";
setTimeout(check,1000);


}
check();

 function hideshow()
 {
 //if(document.getElementById("master").style.display='none')
 //{
  //$('#master').show();
//}
$("#master").css("display", "block");
  var node=<?php echo $node; ?>;
  if(node >20)
  {
  $('#node').show();
  }

 }


</script>
</html>

Answer 1

好吧，我的预感正在尖叫着我。

第一点：

我假设您在某处直接调用hideshow()的onclick处理程序？即使它没有，也没关系，关键是你把它放在submit按钮上。

我的猜测是你点击提交按钮，你的div显示，然后页面刷新，你的元素似乎再次消失。

在您的事件功能中，我们现在假设它是hideshow()，将事件信息作为参数传递，并preventDefault。这将阻止submit按钮执行其默认行为（提交表单）。

function hideshow(e)
{
    e.preventDefault();

    ///other stuff

}

第二点：

如果你有一个叫做“hideshow（）”的函数，就是它隐藏并显示一个元素（也看你的注释代码作为更多证据），我假设你我想使用jQuery toggle()。 toggle会隐藏可见的内容（display:none），或显示不可见的内容（display:block）。

所以，改变：

$("#master").css("display", "block");

为：

$("#master").toggle();

jQuery切换：http://api.jquery.com/toggle/

第3点：

我做了很多预感挖掘，灵魂搜索和侦探工作来提供这个答案。如果这是正确的，那一切都取决于运气和精心制作的假设。我相信在你的问题中还有其他一些事情可以让我们在将来的问题中让事情变得更容易。

显示属性有问题

1 个答案: