0

我目前正在使用 Jquery 开发 Javascript，当秒数 = 0 时显示 div 块。

这是我的代码：

<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

尝试了一个jsfiddle，它工作正常。也许你有一个时间问题：js 是在所有 html 元素都存在之前加载的。尝试使用$( document ).ready

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

请参阅工作示例：http: //jsfiddle.net/W7PqB/2/

于 2013-11-14T13:22:51.757 回答
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 回答