javascript - 如何设置 $.fn。函数，所以它在调用时被执行？

Question

我有以下代码：

    function init() {
        var $contentButtonPanel: JQuery = $('#content-button-panel')
        $contentButtonPanel
            .find('.arbo .toggle, .collapsible-list li:has(ul) > :first-child, .collapsible-list li:has(ul) > :first-child + span')
            .click(function (event) {
                $(this).toggleBranchOpen();
            });
    }

    $.fn.toggleBranchOpen = function () {
        this.each(function () {
            $(this).closest('li').toggleClass('closed');
        });
        return this;
    };

当我调试时，我可以看到 $(this).toggleBranchOpen(); 到达线。但是，代码不会进入该函数。

这是声明 toggleBranchOpen 的方式有问题吗？请注意，toggleBranchOpen 的唯一使用时间是在 init 函数单击事件中。我是否可以将该代码移入 init 并简化事情？

Answer 1

请尝试以下代码：

function init() {
    $('#content-button-panel')
        .find('.arbo .toggle, .collapsible-list li:has(ul) > :first-child, .collapsible-list li:has(ul) > :first-child + span')
        .click(function (event) {
            $(this).closest('li').toggleClass('closed');
        });
}

由于您表示不需要全局函数，因此我尝试稍微简化代码。

希望有帮助。

Answer 2

声明没问题。由于您正在修改 jQuery 的原型，它将立即可供所有 jQuery 对象使用。

这是让我感到困惑的线，

var $contentButtonPanel: JQuery = $('#content-button-panel')

我认为这只是因为您正在从较大的文件中复制和粘贴。我唯一有助于识别问题的建议是将一些调试信息放入此循环中；

this.each(function () {
    $(this).closest('li').toggleClass('closed');
});

除此之外，您的选择器是否有可能找不到任何li元素？