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);
