CODEWITHSUNDEEP
javascriptjqueryswitch-statement
atlMapper
atlMapper

Reputation: 764

Check for specific class to execute switch statement

I'm running json calls based on a specific class in the body class To help reduce unnecessary calls on various pages.

ex:

$(function () {
    if ($('body.CLASSNAME1').length == 1) {
        //JSON call
    });
});

$(function () {
    if ($('body.CLASSNAME2').length == 1) {
        //A Different JSON call
    });
});

To clean this up, I'd like to one function and execute inner functions based on a given class name. I'm thinking a switch statement but can't wrap my brain around the logic, I started with $.hasClass('') but can't figure out any other way to read and execute based on a unique class name.

Upvotes: 0

Views: 286

Answers (6)

Mikhus
Mikhus

Reputation: 1069

If you're looking for exact use of switch/case statement it could be done like this:

$.each( $('body').attr('class').split( ' '), function( i, cls) {
    switch (cls) {
        case 'CLASSNAME1': {
            alert( 'JSON call');
            break;
        }
        case 'CLASSNAME2': {
            alert( 'A Different JSON call');
            break;
        }
    }
});

This example at jsfiddle: http://jsfiddle.net/b36F8/

Upvotes: 0

user1106925
user1106925

Reputation:

Just create an object mapping class names to functions that call the various XHR calls, and enumerate the object, testing each class name, and invoking the function if the body has that class.

 $(function(){
    // Map your keys (class names) to your JSON calls
    var classes = {
        CLASSNAME1: function() {
                        // JSON call
                    }
        CLASSNAME2: function() {
                        // A Different JSON call
                    }
    };

    // enumerate the object, calling the related function for each found class
    $.each(classes, function(key, func) {
        if ($("body").hasClass(key))
            func();
    })
 });

Or you can use $.proxy to simply bind the XHR parameters if there's no additional logic needed:

    var classes = {
        CLASSNAME1: $.proxy($, "ajax", {...parameters...})
        CLASSNAME2: $.proxy($, "ajax", {...parameters...})
    };

Upvotes: 2

Katana314
Katana314

Reputation: 8620

Well, this is a bit declarative, but here's my shot at it:

var callbacks = {
    classone: function() {
        //TODO
    },
    classtwo: function() {
    }
}
var bod = ${'body');
for (var cls in callbacks) {
    // 'hasOwnProperty' is just a safety check for object iteration
    if (callbacks.hasOwnProperty(cls) && bod.hasClass(cls) {
         callbacks[cls]();
    }
}

squint's example is pretty similar.

Upvotes: 0

zgood
zgood

Reputation: 12581

Maybe this is what you want?

$(function () { 
   var classes = $('body').attr('class').split(' ');
   $.each(classes, function(i){
       var class = classes[i];
       switch class{
          //switch logic to execute function
       }
    });
  });

Upvotes: 0

Kevin B
Kevin B

Reputation: 95047

A switch statement doesn't make much sense in this case because an element can have multiple classes, therefore it could match multiple cases. However, you can get rid of the if statement by using .each():

$(function(){

    $('body.CLASSNAME1').each(function(){
        $.getJSON(args);
    });
    $('body.CLASSNAME2').each(function(){
        $.getJSON(args);
    });
    $('body.CLASSNAME3').each(function(){
        $.getJSON(args);
    });

});

though, it's no more efficient than what you previously had.

You can further simplify it using an object containing a map of ajax options per classname.

var ajaxOptions = {
    "CLASSNAME1": {
        url: "...",
        ...
    },
    "CLASSNAME2": {
        url: "...",
        ...
    },
    "CLASSNAME3": {
        url: "...",
        ...
    }
};
$.each(ajaxOptions,function (classname,options) {
    $("body." + classname).each(function(){
        $.ajax(options);
    });
});

Upvotes: 0

Gabe
Gabe

Reputation: 50503

How about:

$(function(){
    var $body = $('body');
    if($body.hasClass('CLASSNAME1')) 
    { ... } 
    else if($body.hasClass('CLASSNAME2')) 
    { ... }
});

Upvotes: 0

Related Questions