Jquery - 点击DIV并隐藏元素？

我目前工作的Javascript与jQuery这显示了当秒钟后= 0Jquery - 点击DIV并隐藏元素？

这里的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。我的错误在哪里以及我如何解决它？

来源

2013-11-14 user2987591

尝试给$（ “P #countblock”）隐藏（）; –

不工作。你可以在这里查看我的代码：www.vemvo.com/test/index.html – user2987591

我已经在jsfiddler中粘贴了ur代码，并检查其工作正常。 http://jsfiddle.net/WS25z/ –

点击事件绑定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-14 13:22:39 Gowsikan

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

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

见工作示例：http://jsfiddle.net/W7PqB/2/

来源

2013-11-14 13:22:51 Friederike

你的代码是正确的，但它仍然没有工作，因为这个地方是。它位于身体之前，因此您必须使用$(document).ready();或将代码放在页面的页脚上。

来源

2013-11-14 13:25:59

它的工作就是这样，fiddle

$(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-14 13:26:53

从头部更换脚本体：

<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-14 13:27:14

Jquery - 点击DIV并隐藏元素？

回答

相关问题