Javascript 显示属性有问题_Javascript_Jquery_Html

Javascript 显示属性有问题

javascript jquery html

Javascript 显示属性有问题,javascript,jquery,html,Javascript,Jquery,Html,我将在“样式”属性中将div标记的显示设置为“无”，然后将其设置为“基于单击功能显示”。问题是，当我单击on click功能时，它会显示一秒钟，然后再次关闭。请通读一遍，告诉我哪里出了问题 <?php error_reporting(0); $val1=0; $irate=0; $node=0; ?> <html> <head> <link href="style.css" /> <style type="text/css

我将在“样式”属性中将div标记的显示设置为“无”，然后将其设置为“基于单击功能显示”。问题是，当我单击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>


#输入div
{
-网络工具包盒阴影：3px 3px 14px 7px#d1dcf7；
盒影：3px 3px 14px 7px#d1dcf7；
}
#主人
{
-网络工具包盒阴影：3px 3px 14px 7px#d1dcf7；
盒影：3px 3px 14px 7px#d1dcf7；
}
#节点
{
-网络工具包盒阴影：3px 3px 14px 7px#d1dcf7；
盒影：3px 3px 14px 7px#d1dcf7；
}
html
{
溢出：隐藏；
}
身体
{
身高：100%；
宽度：100%；
溢出：隐藏；
背景：url（images/bg.png）；
}
#标志
{
宽度：100%；
身高：20%；
边框：0px纯黑；
}

每日的
每年
总数据
增长率
期间
一年
两年
三年
4年
五年
摄入数据
原材料消耗量：
节点原始存储：24TB
MapReduce临时空间保留25%
节点可用原始存储容量18TB
1年（平稳增长）
CPU 2*6核2.9 Ghz/15 MB缓存
内存64GB DDR3-1600 ECC
磁盘控制器SAS 6Gb/s
磁盘12*2/3 TB LFF SATA II 7200 RPM
网络控制器2*1Gb以太网
CPU 2*6核2.9 Ghz/15 MB缓存
内存64GB DDR3-1600 ECC
磁盘控制器SAS 6Gb/s
磁盘12*2/3 TB LFF SATA II 7200 RPM
网络控制器2*1Gb以太网


函数检查（）{
var节点=；
console.log（节点）；
//document.getElementbyId（“master”）.style.display=“”；
设置超时（检查，1000）；
}
检查（）；
函数hideshow（）
{
//if（document.getElementById（“master”）.style.display='none'）
//{
//$（'#master'）.show（）；
//}
$（“#主控”）.css（“显示”、“块”）；
var节点=；
如果（节点>20）
{
$（“#节点”）.show（）；
}
}

好吧，我的直觉在向我尖叫

第一点：

我假设您在某处有一个onclick处理程序，它直接调用

hideshow（）

？即使没有，也没关系，关键是你把它放在了

submit

按钮上

我猜您正在单击submit按钮，您的div出现，然后页面刷新，您的元素似乎再次消失

在事件函数中，现在假设它是

hideshow（）

，将事件信息作为参数传递，然后

preventDefault

。这将停止

submit

按钮执行其默认行为（提交表单）

第二点：

如果您有一个名为“hideshow（）”的函数，也就是说，它隐藏并显示一个元素（同时查看注释代码作为更多的证据），那么我认为您应该使用jQuery

toggle（）

<代码>切换将隐藏可见的内容（

显示：无

），或显示不可见的内容（

显示：块

）

因此，改变：

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

致：

jQuery切换：

第三点：

我做了大量的直觉挖掘、自我反省和侦探工作来提供这个答案。如果这是正确的，那么这一切都要归功于运气和良好的假设。我相信在您的问题中，您还可以做一些其他的事情，以便在以后的问题中让我们更轻松。

我没有看到单击功能onClick事件处理程序在哪里？调用hideshow（）的位置？在何处触发click event节点id在何处？请查看div标记保存在表单标记中，并且单击submit按钮时触发click事件。我希望submit按钮执行其操作na，那么我为什么要阻止它？只需检查我的编辑就可以看到全部内容code@Jace你的第一点看起来是正确的，尤其是现在OP提供了更多code@jibindcruz我已经查过你的密码了。提交按钮刷新页面/导航到新页面（通过GET/POST请求过程）。因此，要么希望元素显示并保持打开状态，要么希望刷新页面。你不能两者都做。除非将变量发布到下一页并动态设置

#master

是否可见。但这超出了这个问题的范围。您的问题是关于

显示

属性的，我相信我已经为您解决了这个问题。

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

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