Question

我有一个每五秒运行一次的功能。在它运行之后，看起来prewhour变量没有获取最新的值，即使我更新它并且在我的源代码中也是最新的值。

我试过试试

prewhour2 = $ ("# hour"). attr ("data-now");

然后，在google chrome consol中，效果很好。

但是，当正确进入countTo函数min时，它将无法正常工作，我得到：未捕获的TypeError：undefined不是函数

似乎计数我的功能不太好。任何人都可以帮我找出原因吗？（数据（＆＃34;现在＆＃34;）有效，但在重新运行该函数后似乎从中获取了最新值。

currhour只是一个可以测试的数字，它完美无瑕。

prewhour = $("#hour").data("now");
$('#hour').countTo({
    from: prewhour,
    to: currhour,
    speed: 2000,
    refreshInterval: 50,
    onComplete: function (value) {}
});
$("#hour").attr('data-now', currhour);

代码：

(function ($) {
    $.fn.countTo = function (options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});
        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;
        return $(this).each(function () {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(addCommas(value.toFixed(options.decimals)));
                if (typeof (options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }
                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;
                    if (typeof (options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };
$.fn.countTo.defaults = {
    from: 0, // the number the element should start at
    to: 100, // the number the element should end at
    speed: 1000, // how long it should take to count between the target numbers
    refreshInterval: 100, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    onUpdate: null, // callback method for every time the element is updated,
    onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);

编辑，总代码：

function updateInformation() {
    var request_url = 'http://www.lucianomafia.no/accessgambling';
        $.ajax({
    type: "POST",
    url: request_url,
    dataType : 'json',
            data: {  location: '<?echo $data->location?>', type: 'blackjack' },


    success: function(response){
            $("#lastestGames").html(response.table);
        prewhour2 = $("#hour").attr("data-now");


        prewhour = $("#hour").data("now");
        prewday = $("#day").data("now");
        prewweek = $("#week").data("now");
        prewtotal = $("#total").data("now");

        currhour = response.hour;
        currday = response.day;
        currweek = response.week;
        currtotal = response.total;


        jQuery(function($) {
                    $('#hour').countTo({
                        from: prewhour,
                        to: currhour,
                        speed: 2000,
                        refreshInterval: 50,
                        onComplete: function(value) {
                        }
                    });
            $('#day').countTo({
                from: prewday,
                to: currday,
                speed: 2000,
                refreshInterval: 50,
                onComplete: function(value) {
                }
            });
            $('#week').countTo({
                from: prewweek,
                to: currweek,
                speed: 2000,
                refreshInterval: 50,
                onComplete: function(value) {
                }
            });
            $('#total').countTo({
                from: prewtotal,
                to: currtotal,
                speed: 2000,
                refreshInterval: 50,
                onComplete: function(value) {
                }
            });
        });
        $("#hour").attr('data-now',currhour);
        $("#day").attr('data-now',currday);
        $("#week").attr('data-now',currweek);
        $("#total").attr('data-now',currtotal);


    },



    error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest.responseText);
    }
});

}


function update(){
    setInterval(function(){updateInformation()},5000);
}
update();

Answer 1

正如Satpal在上面的评论中所说，当您通过.data()设置时，您无法通过.attr()获得价值。不应混合使用这些函数进行保存和检索。

data - 函数用于将数据存储到dom元素。通过此功能存储的数据无法在您的html标记中看到。此函数接受任何javascript类型作为值（undefined除外）。

而attr - 函数为html元素添加一个新属性。这可以在你的html标记中看到。与上述参考文献中一样，.attr()允许您设置属性和值的对象，并通过函数的返回值设置值。

.attr()的数据集可以使用.data()重试，但不能反过来。但我强烈建议不要将这两者混合在一起。

代码：

prewhour = $("#hour").data("now");
//or
prewhour = $("#hour").attr("data-now");
$('#hour').countTo({
    from: prewhour,
    to: currhour,
    speed: 2000,
    refreshInterval: 50,
    onComplete: function (value) {}
 });
 $("#hour").data('now', currhour);
 //or
  $("#hour").attr('data-now', currhour);

我创建了一个fiddle，其中包含您的代码示例。（我必须删除ajax-call和countTo-function，但它似乎正常工作）。如果这对您没有帮助，可能是您的ajax-response或countTo-function中存在错误。

Jquery attr不会在我的函数中工作

1 个答案: