如何調用基於類的一組變量函數的一組元素

Question

的，我有以下的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); 

Answer 1

Try this fiddle

最佳的解決方案基本上它提取從「類＃」的數量，並調用相應的功能。

$('.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>元素？

Answer 2

如果您想避免使用eval()，您可以將一些自定義事件綁定到生成類。

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

$(".ele").trigger("generate");