javascript无法实现返回答案

【问题标题】：javascript could not achieve the returnjavascript无法实现返回
【发布时间】：2015-12-24 18:03:01
【问题描述】：

这个函数我做了，还是新的，不知道怎么粗略处理。

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 选择器就使用那个庞大的库。

【问题讨论】：

我不清楚你想要做什么，你期望发生什么，以及真正发生了什么，所以你能澄清你的问题吗？
我希望隐藏具有 someClass 类的元素，但它不起作用。它没有返回元素。但实际上它在使用return this 时与其他功能一起使用。我想从t=[] 传递元素，但遗憾的是，它没有返回我想要的。希望你能理解。对不起，我的英语不太好
使用sizzle，sizzle是jquery的核心，但只包含'getElement'部分sizzlejs.com

标签： javascript return

【解决方案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;
    }
}
}

【讨论】：

不，它是当前元素。我只想传递具有someClass 类并存储t=[] 数组的新过滤元素。
@Hazmat 已经回答了这个问题。无论如何谢谢。我知道那里有更好的图书馆，但我想拥有自己的图书馆。来自菲律宾的圣诞快乐。 :)

【解决方案2】：

这里的问题是这一行：$.fn.prototype = {};。您的代码anywhere 中没有$.fn，因此您不能在其上设置prototype 属性。（在 jQuery 中，$.fn 设置为 jQuery.prototype，这就是为什么你可以设置 $.fn.someMethod。）

如果您希望hasClass 方法存在于您的对象上，您需要修改query 的prototype。你的$ 函数返回new query 对象，所以query 是hasClass 方法应该在的地方。

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

附： hide 方法不应该将style.display 设置为'none'吗？

不管怎样，你的代码应该是这样的：

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

&lt;p class="someClass element"&gt;You can't see me!&lt;/p&gt;

（注意：Array.isArray 在 IE

【讨论】：

对不起。 :) .. 没看到.. 谢谢.. 我会试试这个。我已经在我的帖子中包含了我对原型制作还不熟悉的内容。我需要一些专业人士来真正向我解释这种东西。顺便说一句，我刚刚从 John Resig 的书中读到这个
等等，是否有必要使用new query(t) 或者我现在可以调用函数query(t) 吗？
@johnpaulcalvo：您需要new 关键字，以便创建一个新对象。否则，this 不会是你想的那样。

【解决方案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';
}

【讨论】：