2013-04-25 94 views
-1

我在樣式屬性中將div標籤的顯示設置爲none,稍後我將其設置爲基於點擊功能進行顯示。問題是,當我點擊點擊功能時,它顯示一秒鐘,然後再次關閉。請通過並告訴我哪裏出錯了。顯示屬性的問題

<?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> 
+0

我沒有看到點擊功能 – 2013-04-25 05:14:14

+0

onClick事件處理程序在哪裏? hideshow()在哪裏被調用? – Osiris 2013-04-25 05:14:44

+0

你在哪裏點擊點擊事件 – swetha 2013-04-25 05:14:52

回答

1

好的,我的直覺尖叫着我。

第一點:

我假定你有一個onclick處理程序的地方,直接調用hideshow()?即使沒有,也沒關係,重要的是你已經把它放在了submit按鈕上。

我的猜測是,你點擊提交按鈕,你的div出現,然後頁面刷新,看起來你的元素再次消失。

在你的事件函數中,我們假設它現在是hideshow(),傳遞事件信息作爲參數,並且preventDefault。這將阻止submit按鈕執行其默認行爲(提交表單)。

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

    ///other stuff 

} 

第二點:

如果你有一個叫做功能「隱藏顯示()」,也就是說,它隱藏和顯示元素(也看你的註釋代碼爲更多的證據這個),我假設你會想要使用jQuery toggle()toggle將隱藏可見的東西(display:none),或顯示不可見的東西(display:block)。

左右,變化:

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

到:

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

jQuery的切換:http://api.jquery.com/toggle/

3點:

我做了很多的預感挖的,靈魂搜尋和偵探工作提供t他的回答。如果這是正確的,那完全取決於運氣和做得好的假設。我相信在你的問題中你可以做的其他事情要求在未來的問題中讓事情變得容易一些。

+0

你的第一點是什麼? – 2013-04-25 05:26:00

+0

@jibindcruz它就在那裏......用粗體顯示。 – Jace 2013-04-25 05:26:14

+0

我想提交按鈕來做它做的事情,所以我爲什麼要阻止它呢?只是檢查我的編輯看到整個代碼 – 2013-04-25 05:27:53