Question

我有一个容器div，它循环遍历PHP数组中的项目，以生成具有唯一ID的重复元素div。

我正在使用倒计时插件（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');
}

Answer 1

在ajax函数返回后，只需调用jquery再次初始化倒计时。

而不是使用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(){...})

初始化倒计时后，删除“未处理的”班级名称

Answer 2

 $(".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变量

jQuery倒计时 - 适用于通过AJAX / PHP加载的新元素

2 个答案: