0

我有以下html代码：

<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>​

我的javascript看起来像这样：

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

});

我的问题是，我怎样才能使这行代码更具可扩展性？我尝试使用开关，但是如果其中一个元素有一个类，下面的脚本将调用两个函数，但是如果我有 10 个类怎么办？我认为这不是我创建 jsFiddle http://jsfiddle.net/7uUgz/6/的最佳解决方案

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

2 回答 2

1

试试这个小提琴

基本上它从'class#'中提取数字并调用适当的函数。

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


    var classList = $(this).attr('class').split(/\s+/);
    $.each(classList, function(index, item) {
        if (item.indexOf('class') != -1) {
            id = item.replace('class', '');
            console.log('id : ' + id);
        }
    });

    var face = eval('class' + id + 'Generator')(paper);
    resize(face, s);

});

而不是使用class1，class2 ...，您可以只使用数据属性并在需要调用函数时读取它..

就像是：

<i data-id="1" class="small ele class1"></i>

你为什么要使用<i>元素？

于 2012-10-12T03:25:34.807 回答
1

如果您想避免使用eval()，可以将一些自定义事件绑定到生成类。

$(".class1").bind("generate", function(paper)
{
  ...
});
$(".class2").bind("generate", function(paper)
{
  ...
});

$(".ele").trigger("generate");
于 2012-10-12T03:28:55.380 回答