请查看下面编写的代码。我正在尝试在一页上设置多个计时器:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
function LoadText()
{
document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';
}
</script>
</head>
<body>
<div id="dd">
</div>
<script type="text/javascript">
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.#defaultCountdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</body>
</html>
创建Divs Hardcoded时,我的代码工作正常。但是,当我通过Ajax加载它时(为了理解代码,目前我正在使用Function LoadText()创建Divs),但无法显示它。请帮帮我。
最佳答案
您应该为#defaultCountdown div使用类或唯一ID。
同样,这也会使选择器引擎感到困惑,因为您告诉选择器引擎寻找其中带有#号的类:
$('div.#defaultCountdown').each(function()
尝试将其更改为类并使用:
$('div.defaultCountdown').each(function()
更新:好的,您的代码无法正常工作的原因是因为从未调用
LoadText()
函数。如果您将脚本更新为如下所示,它将可以正常运行(demo):$(document).ready(function() {
// This is needed to simulate the ajax call
LoadText();
// set up countdown timers
var date = new Date();
$('div.countdown').each(function() {
$(this).countdown({
until: parseInt($(this).attr("rel"), 10),
format: "DHMS",
expiryText: "Expired"
});
});
});