namespaced toggling for CSS classes

Question

jquery has this function

• http://api.jquery.com/toggleClass/

but it does not allow name-spacing. With name-spacing you can toggle between multiple classes as if they were radio buttons.

for example

toggleClass(el, 'ns1', 'test')

will check ns1 and will remove any other class with this namespace and replace it with the class test

I wrote this library function to keep my application code.

One mistake I made was I prefixed the class with the namespace rather then make it a separate argument.

Here is my in progress use of a custom toggleClass with name-spacing:

// apply event listeners to the input elements
applyEL: function (input_element, label_element) {
    var self = this;
    self.J.input = $(input_element);
    self.J.input.on("blur", function () {
        if (input_element.value === '') {
            $A.toggleClass(input_element, self.S.toggle_border_show);
            $A.toggleClass(label_element, self.S.toggle_label_show);
            $A.expandFont(label_element, 'up', self.S.speed);
        }
    }, false);
    self.J.input.on("focus", function () {
        if (input_element.value === '') {
            $A.toggleClass(input_element, self.S.toggle_border_obscure);
            $A.toggleClass(label_element, self.S.toggle_label_obscure);
        }
    }, false);
    self.J.input.on("paste keypress drop", function () {
        $A.setTimeout(function (label_element, input_element) {
            $A.toggleClass(label_element, this.S.toggle_label_hide);
            $A.toggleClass(input_element, this.S.toggle_border_hide);
        }, 0);
    }, false);
}

Is there a better way to do this, other from what I mentioned.

Answer 1

Better way would be, rather add a class to html or body element, which would act as a name space, much like common theme switchers?

And if you need a local name space for a specific element you would reference the parent element.

And boom, you have name spaces!