编写一个jQuery插件：公共方法和多个插件实例

Question

I've been working for hours on writing jQuery plugin, read the documentation, searched through posts and so on. One thing is not clear yet. I'm writing a plugin with multiple instances, so I've got something like this

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>

<script type="text/javascript">
    $(".box").myPlugin();
</script>

So the plugin will act on two DOM elements. Here is a plugin demo. Let's say that I need one or more private variables (myValue in the demo), of course any instance (box1, box2) has got different values.

(function ( $ ) {

    $.fn.myPlugin = function() {

        this.each(function() {

            /* this is a private variable */
            var myValue = Math.floor(Math.random() * 10000);
        });  

        return this;
    };

    /* this is a public method */
    $.fn.myPlugin.showValue = function() {
        alert('My value is ' + myValue);
    };

}( jQuery ));

Now I need this plugin to expose one public method to read/write such private variable. The code above will fail with "myValue is undefined" error, of course.

I need, in some way, to get a reference to any instance, and then to call 'their' public method. Something like

$('#box2').showValue() /* ??? */

Any help will be appreciate. Thank you.

Answer 1

Unfortunately there's no easy way to make your example work without simply defining additional "plugins" on the $.fn namespace .

Normally, methods of a plugin are implemented either as arguments passed to the plugin:

$("foo").myPlugin(); // initialize
$("foo").myPlugin("doSomething"); // do something

or by having an "instance" object available:

$("foo").myPlugin(); // initialize
var inst = $("foo").data("myPlugin"); // get instance
inst.doSomething(); // do something

An example of the first option can be found here: http://learn.jquery.com/plugins/basic-plugin-creation/