Question

我的HTML类似于以下内容：

<div id="quoteContainer">
    <div class="quote prototype"></div>
     <div class="quote live q0"></div>
     <div class="quote live q1"></div>
     <div class="quote live q2"></div>
     <div class="quote live q3"></div>
     ...
</div>

每个现场div都是原型div的coppies。以下是制作副本的代码：

quote = $(".quote.prototype").clone().show()
        .removeClass("prototype").addClass("live")
        .addClass(foo)
        .appendTo("#quoteContainer");

$.extend(quote, QuoteCalculator);
quote.setQuoteClass(foo);

Foo是一个结合了“q”和引号数的变量。 QuoteCalculator类有几个我想调用的方法，包括（例如）shout（）。这是QuoteCalculator的一部分：

var QuoteCalculator = {
    ...

    shout: function() {
        console.log("hello from calculator");
    },

    ...
};

在程序的另一点，我想调用shout方法。这是我的代码：

$(".quote.live").each(function() {
      this.shout();
});

这是什么萤火虫说： this.shout不是一个函数 [打破此错误] this.shout（）;

编辑：这是奇怪的部分：调用quote.setQuoteClass（foo）不会产生错误。相反，它运作得很好。

为什么会出现问题，导致问题的原因以及如何解决？

Answer 1

您的延伸：

$.extend(quote, QuoteCalculator);

正在扩展jQuery函数的实例。不扩展jQuery原型，以便对前一个集合（quote）中的元素的任何新查询也获得方法。

$(".quote.live")

^^这是一个新查询，导致新的jQuery实例未连接到您扩展的quote中存储的实例。

您需要查看plugin authoring以及如何扩展jQuery“类”（jQuery函数的原型），以便工厂返回的所有jQuery实例都具有您想要的方法。

Answer 2

看起来你期望quote成为DOM对象 - 相反，它是一个引用DOM的jQuery对象。试试这个：

$.extend(quote.get(0), QuoteCalculator);

无法在JQuery对象上调用扩展方法

2 个答案: