Question

我在同一个html页面中有一个重复拉斐尔绘图的问题。我基本上需要12个地图，每个地图都包含不同的数据，在同一个html页面中。我的代码如下：

JS

    var flmap = Raphael("january" ,'100%', '100%');
    flmap.setViewBox(0,0,500,500,false); 

    var keys = flmap.set();
    keys.push(flmap.path("drawing path here").attr({

parent: 'keys',
'stroke-width': '.5',
fill: '#156ba1',
stroke: "#efefef"
    }));
    keys.data({
id: 'keys',
county: 'Keys'
   })
   //There are 8 more of these var's, each drawing a region of FL, I took them out for space sake

    var flmapGroups = [keys, panhandle, south, southwest, southeast, westcentral, eastcentral, northeast, northwest];

    for (var e = 0, len = flmapGroups.length; i < len; i++) {

var el = flmapGroups[i];

el.mouseover(function() {
    this.toFront();
    this.attr({
        cursor: 'pointer',
        fill: '#f2ca54',
        stroke: '#efefef',
        'stroke-width': '.5'
    });

    this.animate({
        transform: 's1.5'
    }, 200);
    this.data({
            county: document.getElementById('county-name').innerHTML = this.data('county')
            });
});
el.mouseout(function() {
    this.animate({
        transform: 's1'
    }, 200);
    this.attr({
        fill: '#156ba1'
    });
});
     el.click(function() {
    this.animate({
        fill: '#ef882b'
    }, 200);

            this.data({
            county: document.getElementById('county-name').innerHTML = this.data('county'),
            lunar: document.getElementById('lunar').innerHTML = this.data('lunar')
            });

});


    }};

HTML

         <div id="january"> </div>
         <div id="county_info">
         <h1 id="county-name"></h1>
         </div>
         <div id="feb"> </div>

         <script src="js/map-jan.js"></script>
         <script src="js/map-feb.js"></script>

所以我上面有12个相同的JS文件，一年中的每个月。它们都链接到同一个HTML页面。但是，只有一个会加载。在HTML示例中，我只是为了空间而调用1月和2月。有一堆空白区域，你可以看到其他人应该，但他们不会加载。如果有人有任何建议使用严格JS我会很感激。我有其他人看了代码，他们能够使用Jquery循环一些东西，但是当引入Jquery时，不同的浏览器和大小有很多问题。任何帮助将不胜感激，我希望这一切都有意义。

使用raphael.js在同一HTML页面中多次复制纸张

0 个答案: