基本的Javascript / jQuery技巧让我不知所措,我用一个生成器创建了这个svg hex网格http://francescasargent.co.uk/blogosphere/playground/hexagons4.html。如果您查看源代码(这里复制和粘贴的时间太长了!),大约有112个多边形。我试图给每个多边形一个唯一的类,只需“pg-”然后是1-112的数字,以便进一步完成工作。但我已经很难过了。作为测试,我试图遍历多边形并将svg文本更改为每个单独多边形的数量(稍后将更改为addClass)。此代码使每个svg文本项中的数字为“111”,而不是循环并为它们分配不同的升序数。我做错了什么?
$( document ).ready(function() {
polygons = $('polygon').length;
for(i=0; i<polygons;i++) {
$('polygon').each(function(i, obj) {
$('text').text('fap'+[i]);
});
}
});
答案 0 :(得分:0)
您没有使用唯一文本,而是选择所有文本并提供相同的文本。请按照以下代码为多边形提供文字
var x = 0;
$('text').each(function () {
$(this).text("text" + x++)
});
要为每个多边形提供唯一的类,请遵循以下代码
var i = 0;
$('polygon').each(function () {
$(this).addClass('pg-' + i++);
});
<强>更新强>
addClass似乎不适用于SVG Elements,因此请改用.attr
var i = 0;
$('polygon').each(function () {
$(this).attr('class', function () {
return this.className + " pg-" + i++
});
});
注意:无需循环循环
答案 1 :(得分:0)
问题在于:
for(i=0; i<polygons;i++) {
$('polygon').each(function(i, obj) {
$('text').text('fap'+[i]);
});
无需包裹for
。它将循环并每次更改文本,直到达到n-1,即111.最后一次迭代将为每个中的所有多边形提供“111”。
您可以简单地使用每个索引:
$('polygon').each(function (index) {
$(this).text("text" + index)
})
另请注意,您应该使用$(this)
内的.each
来定位当前元素,然后更改其text
。