-1

我在样式属性中将 div 标签的显示设置为无，稍后我将其设置为基于点击功能显示。问题是当我点击点击功能时，它会显示一秒钟，然后它又会关闭。请通过并告诉我哪里出错了。

   <?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>
4

1 回答 1

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/

第三点：

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

于 2013-04-25T05:20:00.960 回答