javascript - 在同一个对象中使用对象的方法

Question

需要帮助。我有一个名为 Rigged 的​​库，类似于 jQuery。这段代码并不完整，它只是我的代码示例(我的库还有 500 多行)

(function () {
     var arr = [];
     var Rigged = function ( selector ) {
           return Rigged.fn.init( selector );
     };

     Rigged.fn = Rigged.prototype = {
           map: function ( callback ) {
                  var results = arr, i = 0;
                  for ( ; i < this.length; i++) {
                        results.push(callback.call(this, this[i], i));
                  }
                  return results;
           },

           each: function (callback) {
                 return this.map(callback);
           },

           // this is just example of my code
           css: function (attr, value) {
                 if (attr == 'display') {
                       return this.each(function (current) {
                              current.style.display = value;
                       });
                 }
           },

           hide: function () {
                 return this.each(function (current) {
                      // here's a problem
                      current.css('display', 'none');
                 });
           }

     };


     Rigged.init = Rigged.fn.init = function (selector) {
          var elset, i = 0;
          if (typeof selector === "string")
              elset = document.querySelectorAll(selector);
          else if (...) 
               .... etc

          this.length = elset.length;
          for ( ; i < this.length; i++) { this[i] = elset[i]; }
          return this;
     }

     Rigged.ajax = Rigged.fn.ajax = function ( obj ) {
          // code here
     }

     window.Rigged = window.$ = Rigged;
}());

所以，我调用 map 方法或 each 没有问题，但在名为 hide 的方法定义中，它会打印错误 Uncaught TypeError: current.css 不是控制台中的函数。

当我在索引文件中调用 css 时，如 $("#text").css('display', 'none); 它有效，但在 Rigged.prototype 它不起作用。当我将行 current.css('display', 'none'); 替换为 current.style.display = 'none'; 时，它正常工作。

谁能告诉我为什么 .css 方法不起作用？

已编辑 .map() 方法+ e(回调)到当前

Answer 1

您正在向对象添加 DOM 节点，而不是类似 jQuery 的对象、dom 节点。

当您映射每个元素时，您将 DOM 元素 传递给回调函数:

results.push(callback.call(this, this[i], i));
//-------------------------------^^^^^^^ here

当你做的时候

current.css('display', 'none');

在您的 .hide() 方法中，您试图在没有此类方法的 DOM 元素上调用 .css()，因此会出现错误.