Question

I was wondering if there was a way to define variable for a jQuery plugin and have it be viewable from the outside. (for debugging purposes)

I want this plugin to be possibly invoked on more than one DOM element, so my thinking was that each invocation would maintain its own set of variables.

I was hoping to check the variables’ values in Firebug like so:

$('#hp-feat-promo').featuredPromo.moduleValues.totalNumSlides

but that doesn’t work. Any ideas how this would work, or is my understanding wrong?

(function($){
$.fn.featuredPromo = function (options) {

    /* Inside a jQuery plugin this refers to the jQuery object
     * Inside of the nested function declarations, this refers to the local object, so if 
     * you still want to refer to the original DOM object, you need to hhave a pointer to the top-level this 
     */
    var self = this;

    /* Create some defaults, extending them with any options that were provided */
    var defaults = {
        targetElement: self.find('.window ul li'),
        isAuto: true
    },
    settings = '';

    /* settings is all the configurable parameters, defaults + options (overrides) */
    settings = $.extend(defaults, options);

    this.moduleValues = {
        totalNumSlides: settings.targetElement.length,
        autoRotate: settings.isAuto,
        currentSlide: 0,
        nextSlide: function() {
        },
        prevSlide: function() {
        }       
    };

    return this.each(function() {



    });
};


jQuery(function(){
    $('#hp-feat-promo').featuredPromo();
});
 })(jQuery);

Answer 1

You need to create a global variable or one that is a member of any globally accessible object, e.g. jQuery.

/* inside plugin */
jQuery.debugMessage = this.moduleValues = {};

/* outside plugin */
console.log( jQuery.debugMessage );

Or you could set up a public getter function in your plugin.

But can’t you just use console.log() for debugging from inside the function?