How to call a set of variables functions based on class on a group of elements

Posted by user1547007 on Stack Overflow See other posts from Stack Overflow or by user1547007
Published on 2012-10-12T03:01:27Z Indexed on 2012/10/12 3:37 UTC
Read the original article Hit count: 190

Filed under:
|
|
|
|

I have the following html code:

                <i class="small ele class1"></i>
                <i class="medium ele class1"></i>
                <i class="large ele class1"></i>

                <div class="clear"></div>

                <i class="small ele class2"></i>
                <i class="medium ele class2"></i>
                <i class="large ele class2"></i>

                <div class="clear"></div>

                <i class="small ele class3"></i>
                <i class="medium ele class3"></i>
                <i class="large ele class3"></i>

                <div class="clear"></div>

                <i class="small ele class4"></i>
                <i class="medium ele class4"></i>
                <i class="large ele class4"></i>?

And my javascript looks like so:

var resize = function(face, s) {
    var bb = face.getBBox();
    console.log(bb);
    var w = bb.width;
    var h = bb.height;
    var max = w;
    if (h > max) {
        max = h;
    }
    var scale = s / max;
    var ox = -bb.x+((max-w)/2);
    var oy = -bb.y+((max-h)/2);

    console.log(s+' '+h+' '+bb.y);

    face.attr({
        "transform": "s" + scale + "," + scale + ",0,0" + "t" + ox + "," + oy 
    });

}

$('.ele').each(function() {
    var s = $(this).innerWidth();
    var paper = Raphael($(this)[0], s, s);

    var face = $(this).hasClass("class1") ? class1Generator(paper) : class4Generator(paper);


/*switch (true) {
    case $(this).hasClass('class1'):
        class1Generator(paper);
        break;

    case $(this).hasClass('class2'):
        class2Generator(paper)  
        break;

    case $(this).hasClass('class3'):
        class3Generator(paper)    
        break;

    case $(this).hasClass('class4'):
        class4Generator(paper)
        break;
}*/


    resize(face, s);

    });

my question is, how could I make this line of code more scalable? I tried using a switch but The script below is calling two functions if one of the elements has a class, but what If i have 10 classes? I don't think is the best solution I created a jsFiddle http://jsfiddle.net/7uUgz/6/

    //var face = $(this).hasClass("awesome") ? awesomeGenerator(paper) : awfulGenerator(paper);

© Stack Overflow or respective owner

Related posts about php

Related posts about JavaScript