主页 / 问题 / 781076
Accepted
Alexxosipov
Asked:2020-02-06 20:37:59 +0000 UTC2020-02-06 20:37:59 +0000 UTC

创建一个jquery函数

  • 772

大家好。有以下功能：

function changeCount(current, next, selector) {
    $(function () {                     
        $({numberValue: current}).animate({numberValue: next}, { 
            duration: 500, 
            easing: "linear", 
            step: function(val) {  
                $(selector).html(Math.ceil(val)); 
            } 
        });
    }); 
}

动作非常简单——数字变化的动画。问题：如何将其转换为：

(function( $ ){

  $.fn.changeNumbers = function(next) {

  };

})(jQuery);

那些。以便在代码中可以通过$(selector).changeNumbers(current, next)

做过这个：

(function( $ ){

      $.fn.changeNumbers = function(next) {
          $({numberValue: this.text()}).animate({numberValue: next}, { 
            duration: 500, 
            easing: "linear", 
            step: function(val) {  
                $(this).html(Math.ceil(val)); 
            } 
        });
      };

    })(jQuery);

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined但是它会在线抛出错误$(this).html(Math.ceil(val));

在创建函数时，我并不完全理解 this 的上下文，这是我第一次使用 jquery 做自己的事情。在此先感谢您的帮助！

javascript

1 个回答

  1. Best Answer

    在 handlerstep this中，它指向的不是原始元素，而是构造的对象{numberValue: this.text()}

    您需要在启动之前animate保存到局部变量并this在处理程序中step访问此变量

    然而，在 jQuery 中，习惯上构建调用链。因此，如果您返回传递this给函数的那个​​，那就太好changeNumbers了

    (function($) {
  $.fn.changeNumbers = function(next) {
    var obj = this;
    $({numberValue: this.text()}).animate({numberValue: next}, {
      duration: 500,
      easing: "linear",
      step: function(val) {
        obj.html(Math.ceil(val));
      }
    });
    return this;
  };
})(jQuery);

jQuery(function($) {
  $('#btn').click(function() {
    $('#num').text(50).changeNumbers(100).css({"background-color": "yellow"});
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="num">50</div>
<button id="btn">Go</button>

    • 1

相关问题