在HTML Table集合中只能包含多个jquery倒计时
在HTML Table集合中只能包含多个jquery倒计时
提问于 2013-04-13 06:02:45
我在一个项目上工作，我需要在一个页面上显示几个拍卖的状态。每个项目都有不同的结束日期。我给每一行一个惟一的ID，然后使用这个id来设置时间，但它只设置了一次。这是我的脚本代码：
<script>
$(document).ready(function(){
$('tr[id]').each(function () {
var $this = $(this);
var endDate = new Date();
var count = $this.attr("id");
var year = parseInt(count.slice(0,4));
var month = parseInt(count.slice(4,6));
var day = parseInt(count.slice(6,8));
var hour = parseInt(count.slice(8,10));
var minute = parseInt(count.slice(10,12));
var second = parseInt(count.slice(12,14));
endDate.setFullYear(year, month - 1, day);
endDate.setHours(hour+1);
endDate.setMinutes(minute);
endDate.setSeconds(second);
$('.countdown-styled').countdown({
until: endDate,
format: 'dHMS',
render: function(data) {
var el = $(this.el);
el.empty()
.append("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div>")
.append("<div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div>")
.append("<div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div>")
.append("<div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>")
}
});
});
});
</script>这是我的表格的布局：
<body>
<table id="timerTable">
<tr id="20130425190000">
<div class="countdown-styled" style="width:200px;"></div>
</tr>
<tr id="20130416190000">
<div class="countdown-styled" style="width:200px;"></div>
</tr>
<tr id="20130424190000">
<div class="countdown-styled" style="width:200px;"></div>
</tr>此代码将表中每个倒计时的相同时间设置为相同时间。(即13天3小时58分24秒9)有什么想法吗？
编辑:如果要使用ID，则它必须采用此格式。这是从服务器动态设置的，并以此格式返回。这就是为什么我这样使用parseInt和slice的原因。格式为:年/月/日/小时/分钟/秒(XXXXXXXXXXXXXX)
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-13 06:11:17
您似乎循环了两次，同时使用$('trid')和$('.countdown-styled')。
您只需要将倒计时应用于一个特定的子体：
$this.find('.countdown-styled').countdown根据记录，您的html也缺少单元格(td元素)，我认为这只是一个复制错误。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15981571
复制相关文章
相似问题