0

私は現在、秒が0になるとdivブロックを表示しているJqueryを使用してJavascriptに取り組んでいます。

これが私のコードです：

<HTML>
<HEAD>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="./test.css" />
<script>
$(function () {
var count = 5,
    countdown = setInterval(function () {
        $("p.countdown").html(count);
        if (count == 0) {
            $("p.countdown").hide();
            $("p#countblock").show();
            clearInterval(countdown);
        }
        count--;
    }, 1000);
});

$('#clickToHide').click(function() {
        $("p#countblock").hide();
    });
</script>
</HEAD>
<body>

<p id="clickToHide"> X </p>

<p class="countdown"></p>

<p id="countblock"> text to appear </p>
</body>
</HTML>

ここに私のCSSがあります:

#countblock{
    display:none;
    width:200px;
    height:50px;
    position:absolute;
    background-color:#f1f1f1;
}

すべて正常に動作しますが、「X」をクリックしようとすると、countblock. 私の間違いはどこにあり、どうすれば修正できますか?

4

5 に答える 5

1

あなたのコードは正しいですが、その場所にあるため、まだ機能していません。本文の前にあるため$(document).ready();、ページのフッターにコードを使用または配置する必要があります。

于 2013-11-14T13:25:59.337 に答える
0

domの後にクリックイベントをバインドします

  <script>
    $(function () {
        var count = 5,
        countdown = setInterval(function () {
            $("p.countdown").html(count);
            if (count == 0) {
             $("p.countdown").hide();
            $("p#countblock").show();
            clearInterval(countdown);
         }
          count--;
       }, 1000);
  });
  </script>

<body>

  <p id="clickToHide"> X </p>

  <p class="countdown"></p>

 <p id="countblock"> text to appear </p>

 <script>     
   $('#clickToHide').click(function() {
         $("p#countblock").hide();
     });
  </script>
于 2013-11-14T13:22:39.210 に答える
0

このように動作します、フィドル

$(function () {
var count = 5,
    countdown = setInterval(function () {
        $("p.countdown").html(count);
        if (count == 0) {
            $("p.countdown").hide();
            $("#countblock").show();
            clearInterval(countdown);
        }
        count--;
    }, 1000);
});

$('#clickToHide').click(function() {

        $("#countblock").hide();
    });
于 2013-11-14T13:26:53.837 に答える
0

スクリプトを頭から体に置き換えます。

<body>
<button id="clickToHide"> X </button>
<p class="countdown"></p>
<p id="countblock"> text to appear </p>
<script>
$('#clickToHide').click(function() {
   $("#countblock").hide();
});
</script>
</body>
于 2013-11-14T13:27:14.857 に答える
0

jsfiddle を試してみましたが、正常に動作しています。タイミングの問題があるかもしれません: すべての html 要素が存在する前に js がロードされます。使ってみて$( document ).ready

$(document).ready(function() {
     // your code here
});

実際の例を参照してください: http://jsfiddle.net/W7PqB/2/

于 2013-11-14T13:22:51.757 に答える