javascript - 无法在我的 JQuery 原型类上引用方法

Question

我正在为我的content_item元素定义行为，如下所示：

    $.fn.makeContentItem = function() {

        $(this).selectItem = function() {
            $(".content_item").removeClass("selected");
            $(this).addClass("selected");
            console.log($(this).css('width'));
        }

        $(this).click(function(event) {
            console.log($(this));
            $(this).selectItem();
        });

    }

然后我将 makeContentItem 应用于：

$(".content_item").makeContentItem();

单击一个content_item元素会生成此错误：

Uncaught TypeError: Object [object Object] has no method 'selectItem'

Answer 1

您将该方法添加到 jQuery 集合，然后丢弃该 jQuery 集合。相反，您应该将其添加到元素数据结构中并从中引用它。

$.fn.makeContentItem = function() {

    this.data("selectItem",function() {
        $(".content_item").removeClass("selected");
        $(this).addClass("selected");
        console.log($(this).css('width'));
    });

    this.click(function(event) {
        console.log($(this));
        $(this).data("selectItem").call(this);
    });

}

或者更好的是，只需将其设为私有函数即可。

$.fn.makeContentItem = function() {

    var selectItem = function() {
        $(".content_item").removeClass("selected");
        $(this).addClass("selected");
        console.log($(this).css('width'));
    };

    this.click(function(event) {
        console.log($(this));
        selectItem.call(this);
    });

    // and to make it a complete plugin, return this.
    return this;

}