Question

我已经完成了这个功能，这是新功能，而且我真的不知道如何处理这个问题。

var $;
(function() {
$ = function(e) {
    return new query(e);
};

var query = function(e) {
    var e = document.querySelectorAll(e), i;
    for (i = 0; i < e.length; i++) {
        this[i] = e[i];
    }

    this.length = e.length;
    return this;
};
$.fn.prototype = {
    hide: function() {
        var i;
        for (i = 0; i < this.length; i++) {
            this[i].style.display = 'block';
        }
        return this;
    },
    hasClass: function (klass) {
        var e = this, i;
        var t = [];

        for (i = 0; i < e.length; i++) {
            var k = e[i].className;
            var array = k.split(' ');
            // If the element has the class, add it for return
            if (array.indexOf(klass) > -1) {
                t.push(e[i]);
            }
        }
        // Return the list of matched elements
        return t;
    }
}
} ());

window.onload = function() {
$(".element").hasClass("someClass").hide();
}

所以是的，这就是上面的代码。我认为我已经匹配了课程，但问题是什么，它没有返回元素。我是原型制作的新手，所以请不要苛刻。我真的需要解决这个问题。请不要告诉我去jquery。我不想仅仅因为我想要一些css选择器而使用那个庞大的库。

Answer 1

函数内的

this不是当前元素。

hasClass: function (klass) {
        var e = this, i;
        var t = [];

        for (i = 0; i < e.length; i++) {
            var k = e[i].className;
            var array = k.split(' ');
            // If the element has the class, add it for return
            if (array.indexOf(klass) > -1) {
                t.push(e[i]);
            }
        }
        // Return the list of matched elements
        return t;
    }

这就是你的脚本不返回元素的原因。

另外：

您尝试使用jQuery的方法在库中添加自己的函数，但实际上这不起作用，因为您正在编写纯js而不是jquery，并且您需要做很多事情来制作它像jQuery一样工作。

$.fn.prototype = {
    hide: function() {
        var i;
        for (i = 0; i < this.length; i++) {
            this[i].style.display = 'block';
        }
        return this;
    },
    hasClass: function (klass) {
        var e = this, i;
        var t = [];

        for (i = 0; i < e.length; i++) {
            var k = e[i].className;
            var array = k.split(' ');
            // If the element has the class, add it for return
            if (array.indexOf(klass) > -1) {
                t.push(e[i]);
            }
        }
        // Return the list of matched elements
        return t;
    }
}
}

Answer 2

这里的问题是这一行：$.fn.prototype = {};。代码中的任何地方都没有$.fn，因此您无法在其上设置prototype属性。（在jQuery中，$.fn设置为jQuery.prototype，这就是您设置$.fn.someMethod的原因。）

如果您希望对象上存在hasClass方法，则需要修改prototype的{{1}}。您的query函数会返回$个对象，因此new query是query方法所在的位置。

此外，您的hasClass方法会返回数组。数组没有名为hasClass的方法。您需要让hide方法返回hasClass对象，以便继续链接方法。

P.S。不应该query方法将hide设置为style.display吗？

无论如何，您的代码应如下所示：

＆＃13;

'none'

＆＃13;

var $;
(function() {
  $ = function(e) {
    return new query(e);
  };

  var query = function(e) {
    var e = Array.isArray(e) ? e : document.querySelectorAll(e),
      i;
    for (i = 0; i < e.length; i++) {
      this[i] = e[i];
    }

    this.length = e.length;
    return this;
  };
  query.prototype = {
    hide: function() {
      var i;
      for (i = 0; i < this.length; i++) {
        this[i].style.display = 'none';
      }
      return this;
    },
    hasClass: function(klass) {
      var e = this,
        i;
      var t = [];

      for (i = 0; i < e.length; i++) {
        var k = e[i].className;
        var array = k.split(' ');
        // If the element has the class, add it for return
        if (array.indexOf(klass) > -1) {
          t.push(e[i]);
        }
      }
      // Return the list of matched elements
      return new query(t);
    }
  }
}());

window.onload = function() {
  $(".element").hasClass("someClass").hide();
}

＆＃13;

（注意：Array.isArray在IE＆lt; 9中不起作用。）

Answer 3

如果你想要的只是查询符合条件的元素，并根据元素类型，id或类名CSS查询选择器以及querySelector（）或querySelectorAll（）api隐藏它。

对于您的代码示例，可以重写如下

var elements = document.querySelectorAll("element.someClass");
for(var i = 0; i <elements.length; i++) {
    elements[i].style.visibility = 'hidden';
}

javascript无法实现回报

3 个答案: