Question

我是JavaScript编程的新手，我不懂方法访问。我有一些代码如下所示：

(function ($) {
    $.fn.myCustomUIElement = function (options) {
        var props = { value: 1  }; 

        return this.each(function () { initialize(); }); 
        function initialize() { /* initialization code */  }

        function toggle() { if (props.value == 1) { props.value = 0; } else { props.value = 1; } }
    };
})(jQuery);

我的HTML页面有一个锚标记，负责切换myCustomUIElement的状态。显示此内容并初始化myCustomUIElement的HTML显示在此处：

<div id="myElement"></div>        
<a href="#" onclick="toggleFromHtml('myElement');">toggle</a>

<script type="text/javascript">
    $(document).ready(function () {
        $("#myElement").myCustomUIElement();
    });

    function toggleFromHtml(e) {
        $("#" + e).toggle();
    }
</script>

我的问题是，永远不会调用myCustomUIElement对象中的toggle方法。我可以调用toggleFromHtml就好了。如何访问JavaScript中定义的方法，如上所示？有办法吗？请注意，如果可能，我不想重写第一个代码段中显示的JavaScript。如果可能，我想从toggleFromHtml方法调用该方法。

谢谢！

Answer 1

我认为你有一个插件的开头，你需要扩展jQuery对象。以下是一个示例，请注意$.fn.extend({}) myCustomUIElement()将是您的方法名称

jQuery插件

(function($){
$.fn.extend({
    myCustomUIElement: function(options){
        return this.each(function(){
            new $.MyCustomUIElement(this, options);
        });
    }
});

$.MyCustomUIElement = function(target, options){
    var $target = $(target);

    $target.bind('click', {}, function(e){
        e.preventDefault();

        // your event code
        alert(options.myVar + ' ' + $(this).text());
    });
};
})(jQuery);

你的初始化javascript

$(document).ready(function(){
    $('#wrap .myElement').myCustomUIElement({
        myVar: 'click me!'
    });
});

和HTML

<div id="wrap">
    <a class="myElement" href="#">toggle 1</a>
    <a class="myElement" href="#">toggle 2</a>
</div>

JQuery / JavaScript - 访问方法

1 个答案: