Raphael js如何在一个站点中使用多个图标?使用类而不是ID。

5

我如何在一个网站上包含来自 Raphaël (http://raphaeljs.com/icons/) 的多个图标?

我还没有成功地通过 class="icon" 包含它们,只能通过 id="icon" 包含。因为我不是很精通 JavaScript,所以我搜索了网络,但没有找到任何信息。

我在博客上找到的唯一信息:

    bubble: "M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z",

a = j[b]("column-1")[f]("h2");
for (var z = a.length; z--;) {
   l = a[z];
   l && g(l[f](i)[0], 32, 32).path(k.bubble).attr(m);
}

.js文件:http://dmitry.baranovskiy.com/site2.js

这个博客:http://dmitry.baranovskiy.com/

因为他在每篇文章前使用了一个带有“bubble”类的span元素。

是否有一种方法可以用类(class)而不是ID来引用它?以下是通过ID引用的方式。

var example = Raphael("example", 50, 60);
example.path("icon-string").attr({fill: "#fff", stroke: "#333"});

然后通过以下方式包含它:

<span id="example">
1个回答

7

您需要将元素放到一个数组中,然后对其进行循环:

var elements = document.querySelectorAll('.paper');
for (i=0; i<elements.length; i++) {
    paper = Raphael(elements[i], 50, 50)
    paper.path(bubble).attr({"fill": "#333"})
}

或者使用jQuery版本,以使其与IE6&7兼容

$('.paper').each(function(i){
        paper = Raphael($(this)[0], 50, 50)
        paper.path(bubble).attr({"fill": "#333"})
})

您可以在这里找到演示: http://jsfiddle.net/CHEP9/

没问题,我重构了jQuery版本,因为当时我的思维是以纯js为基础的 :) - methodofaction
@Duopixel 我理解循环遍历选择器以查找文档中的所有类,这使我可以使用类而不是ID。但是,我不理解paper.path(bubble)...... 请问这是什么意思? - codepuppy
“bubble”只是路径字符串,即“M 0,0 L 100,100 L200,100 Z”,因此在OP的代码中,这将在具有类“icon”的每个div元素上放置一个气泡图标。 - methodofaction

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接