Question

所以我有一个jQuery插件，非常好用。在这个插件中，有一个分配给togglePushy();方法的HTML按钮，它工作得很好。

但是，我想从Javascript控制台使用此方法。问题是如果类型$.togglePushy();它说它未定义。我该如何访问它？

$(function() {
    var pushy = $('.pushy'), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
        pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
        menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width

    function togglePushy(){
        body.toggleClass(pushyActiveClass); //toggle site overlay
        pushy.toggleClass(pushyClass);
        container.toggleClass(containerClass);
        push.toggleClass(pushClass); //css class to add pushy capability
    }

    function openPushyFallback(){
        body.addClass(pushyActiveClass);
        pushy.animate({left: "0px"}, menuSpeed);
        container.animate({left: menuWidth}, menuSpeed);
        push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
    }

    function closePushyFallback(){
        body.removeClass(pushyActiveClass);
        pushy.animate({left: "-" + menuWidth}, menuSpeed);
        container.animate({left: "0px"}, menuSpeed);
        push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
    }

    menuBtn.click(function() {
        togglePushy();
    });
});

Answer 1

也许您可以将togglePushy更改为以下内容：

$.togglePushy = function(){ 
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

现在您应该能够以$ .togglePushy（）

的形式访问它

Answer 2

我不知道最好的解决方案。但是你可以通过将你的函数保存在domaready事件处理程序之外来完成这个操作，如下所示。

function togglePushy(){
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

function openPushyFallback(){
    body.addClass(pushyActiveClass);
    pushy.animate({left: "0px"}, menuSpeed);
    container.animate({left: menuWidth}, menuSpeed);
    push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
}

function closePushyFallback(){
    body.removeClass(pushyActiveClass);
    pushy.animate({left: "-" + menuWidth}, menuSpeed);
    container.animate({left: "0px"}, menuSpeed);
    push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
}

$(function() {
    var pushy = $('.pushy'), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
        pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
        menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width



    menuBtn.click(function() {
        togglePushy();
    });
});

然后直接调用togglePushy（）。

Answer 3

你的togglePushy（）函数只在jQuery闭包（匿名函数）的上下文（范围）中定义。相反，在全局范围内定义它（文件中的其他位置，而不是＆＃34;函数参数＆＃34;）。

如果您需要来自该范围的变量，请将它们封装在命名空间（对象）中，或将其声明为window.togglePushy() = function() { /* ... */}。

或

$(document).ready(function() {
  ...
  .....
  window.togglePushy()= function() {
    //to do
  } 
});

或

$(document).ready(function(){
    $('button').click(function(){
        $.togglePushy();
    });
});

如何访问jQuery插件功能？

3 个答案: