0

同じページの複数の場所で使用できるカウントダウンタイマーを作りたいので、何らかの形で機能する必要があると思います。

本当にjQueryで作成したいのですが、自分のコードでは実現できません。たとえば、1ページに10個の商品があり、カウントダウンタイマーを作成する必要があります。タイマーが0の場合、商品を非表示にする必要があります。

私のコードは次のとおりです。

$(document).ready(function(){

    $(".product").each(function(){

        $(function(){
            var t1 = new Date()
            var t2 = new Date()
            var dif = t1.getTime() - t2.getTime()

            var Seconds_from_T1_to_T2 = dif / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);

            var count = Seconds_Between_dates;
            var elm = $(this).attr('id');
            alert(elm);
            countdown = setInterval(function(){
                $(elm + " .time_left").html(count + " seconds remaining!");
                if (count == 0) {
                    $(this).css('display','none');
                }
                count--;
            }, 1000);
        });
    });
});

編集1：

$(document).ready(function(){

    $(".product").each(function(){
            var elm = $(this).attr('id');           

        $(function(){
            var t1 = new Date()
            var t2 = new Date()
            var dif = t1.getTime() - t2.getTime()

            var Seconds_from_T1_to_T2 = dif / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);

            var count = Seconds_Between_dates;

            alert(elm);
            countdown = setInterval(function(){
                $(elm + " .time_left").html(count + " seconds remaining!");
                if (count == 0) {
                    $(this).css('display','none');
                }
                count--;
            }, 1000);
        });
    });
});

これに対する解決策はありますか？

4

2 に答える 2

1

おそらく、すべての製品をチェックする単一の間隔関数を使用します。このようなもの：

$(function() {

    /* set when a product should expire.
       hardcoded to 5 seconds from now for demonstration
       but this could be different for each product. */
    $('.product').each(function() {
        $(this).data('expires', (new Date()).getTime() + 5000);
    });

    var countdown_id = setInterval(function() {
        var now = (new Date()).getTime();
        $('.product').each(function() {
            var expires = $(this).data('expires');
            if (expires) {
                var seconds_remaining = Math.round((expires-now)/1000);
                if (seconds_remaining > 0) {
                    $('.time-left', this).text(seconds_remaining);
                }
                else {
                    $(this).hide();
                }
            }
        });
    }, 1000);
});

有効期限がなくなると、インターバル機能をキャンセルすることもできます。

于 2012-09-22T16:46:09.183 に答える
1

あなたの問題はthis、現在のDOM要素（からeach）ではなく、window-からを参照しているようsetTimeoutです。

それとは別に、不要なdomReadyラッパーがあり、#IDセレクターを忘れており、キャッシュされた参照を使用する必要があり、のタイミングに依存することはありませんsetInterval。これはかなりドリフトする可能性があります。これを使って：

$(document).ready(function(){
    $(".product").each(function(){
        var end = new Date(/* from something */),
            toUpdate = $(".time_left", this);
            prod = $(this);
        countDown();

        function countdown() {
            var cur = new Date(),
                left = end - cur;
            if (left <= 0) {
                prod.remove(); // or .hide() or whatever
                return;
            }
            var sec = Math.ceil(left / 1000);
            toUpdate.text(sec + " seconds remaining!"); // don't use .html()
            setTimeout(countdown, left % 1000);
        }
    });
});
于 2012-09-22T16:19:34.460 に答える