如何将功能添加到某些jQuery对象，而不是其他对象? [英] How to add functions to some jQuery objects, but not others?

问题描述

假设我有一个<ul>列表:

<ul class="products">
    ...
</ul>

我想用jQuery选择它，然后向该对象添加一些功能.例如，我想添加一个addProduct(productData)函数和一个deleteProduct(productId)函数.但是，我希望仅将函数添加到选择器返回的对象中.例如，像这样:

I want to select it with jQuery, then add some functions to that object. For example, I'd like to add an addProduct(productData) function and a deleteProduct(productId) function. However, I'd like the functions to only be added to the object that's returned by the selector. So for example, something like this:

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});

我该如何使用jQuery?这里的关键点是我只想将函数添加到jQuery选择器返回的实例中.换句话说，我不想修改jQuery的原型或创建插件，因为它们会使功能在所有方面都可用，而我只想将功能添加到一个特定的实例中.

How would I do this using jQuery? The key point here is that I only want to add the functions to an instance returned by a jQuery selector. In other words, I don't want to modify jQuery's prototype or create a plugin, since those will make the functions available across everything, whereas I only want to add the functions to one specific instance.

推荐答案

如果您只想在单个 jQuery对象上使用addProduct和deleteProduct方法，那么您所拥有的会工作的很好；但是您必须保留对该jQuery对象的引用/仅使用一次，以保留addProduct和deleteProduct方法的存在.

If you only want the addProduct and deleteProduct methods to feature on that single jQuery object, then what you've got will work fine; but you'll have to keep a reference to that jQuery object/ only use it once, to preserve the existance of the addProduct and deleteProduct methods.

但是，这些addProduct和deleteProduct方法对于特定的jQuery对象是唯一的；您创建的任何其他jQuery对象上都不存在这些方法；

However, these addProduct and deleteProduct methods are unique to that particular jQuery object; the methods won't exist on any other jQuery objects you create;

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});

// Using this particular jQuery object (productList) will work fine.
productList.addProduct();
productList.removeProduct();

// However, addProduct() does not exist on new jQuery objects, even if they use
// the same selector.
$('ul.products').addProduct(); // error; [object Object] has no method 'addProduct'

做到这一点的最佳方法是回到基础并定义单独的addProduct和deleteProduct函数，这些函数接受jQuery对象.如果您想将这些功能限制为仅在ul.products选择器上起作用，则可以这样做；

The best way do to this would be to go-back-to-basics and define separate addProduct and deleteProduct functions, which accept a jQuery object. If you wanted to restrict these functions to they only worked on the ul.products selector, you could do;

function addProduct(obj) {
    obj = obj.filter('ul.products');

    // do something with `obj` (its a jQuery object)
}

建议采用这种方法，因为它可使jQuery.fn API保持一致；否则，您需要将addProduct和removeProduct添加到 some jQuery.fn实例中，但不能添加其他实例，或者使它们的使用在其他实例中变得多余.但是，通过这种方法，addProduct和removeProduct始终存在，但是如果他们不想使用它们，就不要以任何方式陷入困境.

This approach would be recommended as it keeps the jQuery.fn API consistent; otherwise you'd be adding addProduct and removeProduct to some jQuery.fn instances but not others, or making their usage redundant in others. With this approach however addProduct and removeProduct are always there, but don't get in anyones way if they don't want to use them.

此答案最初是在2011年11月jQuery 1.7发行时编写的.从那时起，API发生了很大的变化.上面的答案与jQuery的 current 2.0.0版本有关.

This answer was originally written in November 2011, when jQuery 1.7 was released. Since then the API has changed considerably. The answer above is relevant to the current 2.0.0 version of jQuery.

在1.9之前，曾经使用过一种很少使用的方法，称为 jQuery.sub . 与您要执行的操作有关(但除非您更改方法，否则不会对您有帮助).这样会创建一个新的jQuery构造函数，因此您可以这样做；

Prior to 1.9, a little used method called jQuery.sub used to exist, which is related to what you're trying to do (but won't help you unless you change your approach). This creates a new jQuery constructor, so you could do;

var newjQuery = jQuery.sub();
newjQuery.fn.addProduct = function () {
    // blah blah
};
newjQuery.fn.deleteProduct = function () {
    // blah blah
};

var foo = newjQuery('ul.products');
foo.deleteProduct();
foo.addProduct();

var bar = jQuery('ul.products');
bar.deleteProduct(); // error
bar.addProduct(); // error

但是请小心，方法$的别名将引用旧的jQuery对象，而不是newjQuery实例.

Be careful though, the $ method alias would reference the old jQuery object, rather than the newjQuery instance.

jQuery.sub已从1.9中的jQuery中删除.现在可以作为插件.

jQuery.sub was removed from jQuery in 1.9. It is now available as a plugin.

这篇关于如何将功能添加到某些jQuery对象，而不是其他对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！