Raphael js cercles de dessin dans tous les éléments avec la classe spécifiée

Question

Je viens de découvrir Raphael, et je l'aime, mais je ne suis pas un javascript-er. En ce moment j'ai trois sections répétées de code pour dessiner le même cercle dans trois divs différents. La valeur par défaut pour créer une toile dans Raphael trouve un élément par ID, mais je veux avoir un ensemble de variables pour avoir des cercles dessinés dans tous les divs avec la classe "circle". Je pense qu'il doit y avoir un moyen plus efficace de coder cela. Voici le code que je utilise maintenant:

window.onload = function() { 
    var paper = Raphael("c1", 26, 26); /* Make canvas 26*26px in div id "c1" */ 
    var circle = paper.circle(13, 13, 10.5); /* Draw circle at the center of the canvas with radius 10.5 */ 
    circle.attr("stroke", "#f1f1f1"); 
    circle.attr("stroke-width", 2); 
    var text = paper.text(13, 13, "1"); /* Print text "1" inside the circle */ 
    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
    text.attr("fill", "#f1f1f1"); 

    var paper2 = Raphael("c2", 26, 26); 
    var circle2 = paper2.circle(13, 13, 10.5); 
    circle2.attr("stroke", "#f1f1f1"); 
    circle2.attr("stroke-width", 2); 
    var text2 = paper2.text(12, 13, "2"); 
    text2.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
    text2.attr("fill", "#f1f1f1"); 

    var paper3 = Raphael("c3", 26, 26); 
    var circle3 = paper3.circle(13, 13, 10.5); 
    circle3.attr("stroke", "#f1f1f1"); 
    circle3.attr("stroke-width", 2); 
    var text3 = paper3.text(12, 13, "3"); 
    text3.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
    text3.attr("fill", "#f1f1f1"); 
}; 

site test est @http://jesserosenfield.com/fluid/test.html

Merci beaucoup pour votre aide!

Answer 1

définir une fonction qui prend un argument pour la div afin que vous pouvez automatiser le processus:

function drawcircle(div, text) { 
    var paper3 = Raphael(div, 26, 26); //<< 
    var circle3 = paper3.circle(13, 13, 10.5); 
    circle3.attr("stroke", "#f1f1f1"); 
    circle3.attr("stroke-width", 2); 
    var text3 = paper3.text(12, 13, text); //<< 
    text3.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
    text3.attr("fill", "#f1f1f1"); 
} 

Puis dans votre window.onload:

window.onload = function() { 
    drawcircle("c1", "1"); 
    drawcircle("c2", "2"); 
    drawcircle("c3", "3"); 
};