-1

スタイルプロパティでdivタグの表示をなしに設定していますが、後でオンクリック機能に基づいて表示するように設定しています。問題は、オンクリック機能をクリックすると、1 秒間表示され、その後再びオフになることです。調べて、どこが間違っているのか教えてください。

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

よし、私の予感が私に向かって叫んでいる。

1点目:

hideshow()直接呼び出す onclick ハンドラーがどこかにあると思いますか? なくても構いません、submitボタンに付けたのがポイントです。

私の推測では、送信ボタンをクリックすると div が表示され、ページが更新され、要素が再び消えたように見えます。

イベント関数内で、今のところそうだと仮定してhideshow()、イベント情報をパラメーターとして渡し、preventDefault. これにより、submitボタンはデフォルトの動作 (フォームの送信) を実行できなくなります。

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

    ///other stuff

}

2点目:

「hideshow()」と呼ばれる関数がある場合、つまり、要素を非表示にして表示する場合 (コメント付きのコードもこれの証拠として見てください)、 jQuery を使用したいと思うでしょうtoggle()。toggle表示されているものを非表示にするか ( display:none)、表示されていないものを表示します ( display:block)。

したがって、次のように変更します。

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

に：

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

jQuery トグル: http://api.jquery.com/toggle/

3点目：

私はこの答えを提供するために、多くの予感、魂の検索、および探偵の仕事をしました. これが正しければ、それはすべて運とよくできた仮定によるものです。将来の質問で私たちにとって物事を少し簡単にするために、あなたの質問でできることは他にもあると思います.

于 2013-04-25T05:20:00.960 に答える