Conflict between two jQuery plugins?

Question

I am developing a couple of jQuery plugins for a client website that will allow you to create form elements such as radios, check boxes, and selections. I designed them as three separate plugins inside the same file, and although the plugins for the radio and the flags seem to work fine with each other, my choice gives me problems because it seems to disable the radio and the flag! If I remove it, the other two work fine again.

I suppose I have some kind of conflict between them, but I'm not sure where it could be. If I comment on all the selected plugin code, except for the announcement of the “settings”, the radio and the checkbox are broken. If I delete the settings, the radio stations and checkboxes will start working again, so it seems that the conflict is in the settings.

I declared the plugin parameters the same in all three (only with my own default values):

jQuery.fn.ioFormSelect = function(options) {
    //Default options.
    settings = jQuery.extend({
        'maxOptions': 8,
        'fieldClass': 'ui-field-select',
        'selectedClass': 'ui-field-selected',
        'openClass': 'ui-field-select-open',
        'closeClass': 'ui-field-select-close',
        'disabledClass': 'ui-field-disabled',
        'optionClass': 'ui-field-option',
        'optionGroupClass' : 'ui-field-option-group'
    }, options);

    //Plugin code

});

What am I doing wrong? I thought that the variables declared in this way were "local", and the "global" were defined with the word "var" in advance. Should I have a separate settings variable for each plugin ?: S Many thanks in advance for any advice. :)

Answer 1

There is no keyword var, for example:

var settings = jQuery.extend({

var global, settings, , , , , :)

:

​$("body").ioFormSelect();
alert(window.settings.maxOptions);​​​ //alerts "8"

: var var JavaScript