我有一个容器div,它循环遍历PHP数组中的项,以生成重复的元素div,所有这些都具有唯一的ID。
我正在使用倒计时插件(http://keith-wood.name/countdown.html)应用于每个元素的日期,并在PHP中实现。
这一切都很好,直到我使用AJAX/PHP将更多元素加载到页面中。倒计时不适用于新项目,我正在努力想办法做到这一点。
echo "<div class="item" id="item_$id">
<h4 class="name">$Name</h4>
<p>$Cat</p>";
if ($expires != '') {
$year = date('Y', strtotime($discount['expires']));
$month = date('n', strtotime($discount['expires']));
$day = date('d', strtotime($discount['expires']));
$hour = date('H', strtotime($discount['expires']));
$minute = date('i', strtotime($discount['expires']));
$secs = date('s', strtotime($discount['expires']));
$countdown_html = '<div class="defaultCountdown" id="countdown_' . $id . '" data-year="'. $year .'" data-month="'. $month .'" data-day="'. $day .'" data-hour="'. $hour .'" data-minute="'. $minute .'" data-secs="'. $secs .'"></div>';
echo "<script type="text/javascript">
$(window).load(function(){
var year = $('#countdown_$id').attr('data-year');
var month = $('#countdown_$id').attr('data-month');
var day = $('#countdown_$id').attr('data-day');
var hour = $('#countdown_$id').attr('data-hour');
var minute = $('#countdown_$id').attr('data-minute');
var secs = $('#countdown_$id').attr('data-secs');
$('#countdown_$id').countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
</script>";
}
echo "</div>n";
}
function loadMoreItems(getQuery, page) {
//load items
$.get(getQuery, null, function(data) {
var container = $(data).find('#container');
if (container) {
var newItemsHTML = "";
newItemsHTML = $(container).html();
var $newItems = $(newItemsHTML);
$container.isotope('insert', $newItems, true);
//add jquery effects to new elements
$newItems.find('.hcaption').hcaptions({effect: "fade"});
$newItems.find(".live-tile").liveTile({pauseOnHover: true});
$('.defaultCountdown').each( function() {
var year = $(this).attr('data-year');
var month = $(this).attr('data-month');
var day = $(this).attr('data-day');
var hour = $(this).attr('data-hour');
var minute = $(this).attr('data-minute');
var secs = $(this).attr('data-secs');
$('#' + this.id).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
}
}, 'html');
}
不要使用php将值回显到jQuery调用中,而是将它们添加到div本身,例如
<div class="defaultCountdown" data-year="2013" data-month="11">
然后初始化它将是:
$('div.defaultCountdown').each( function() )
{
year = $(this).attr('year');
...
$(this).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
添加一些检查元素是否已被处理的方法。您可以使用class="unprocessed"最初创建元素
<div class="defaultCountdown unprocessed">
则倒计时初始化功能为:
$('div.defaultCountdown.unprocessed').each(function(){...})
初始化倒计时后,删除"未处理"类名
$(".element").each(function() {
var item_id = "#" + this.id;
if(this.id != 'discount_0'){
container.find(discount_id).remove();
}
$(element_id).countdown({until: new Date($year, $month - 1, $day, $hour, $minute, $secs)});
});
当你在$(element_id)
上应用倒计时时,它应该是
$(item_id)
并且您正在使用$year, $month - 1, $day, $hour, $minute, $secs
,所有这些都是php变量,您不能将它们用作jquery变量