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並隱藏元素？

回答

相關問題