jQuery attr无法在我的函数中工作

Question

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

我试图测试

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

然后，在google chrome consol中可以完美运行。

但是，当正确地进入countTo函数min时，它将无法正常工作，并且我得到：Uncaught TypeError：undefined不是一个函数

看来countto功能我不太喜欢它。 谁能帮我找出原因？ （data（“ now”）可以工作，但是在重新运行该函数后，似乎从中获得了最新的值。

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在上面的评论中所说，通过.attr()设置值时，无法通过.data()获取值。 请勿混合使用这些功能进行保存和检索。

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

而attr -function将新属性添加到html-elements。 这可以在您的html标记中看到。 如参考文献所述， .attr()允许您设置属性和值的对象，并通过函数的返回值设置值。

可以使用.data()检索使用.attr()设置的数据，但反之则不能。 但是我强烈建议不要将两者混为一谈。

对于您的代码：

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);

我用您的代码示例创建了一个小提琴 。 （我不得不删除了ajax调用和countTo-function，但是它似乎正在工作）。 如果这对您没有帮助，则您的ajax响应或countTo-function中可能存在错误。