循环通过svg circle元素来获取数据属性

时间:2016-11-25 10:35:51

标签: javascript svg

我有一个svg绘制出来并希望从每个圆圈中获取某个数据属性。以下是我所拥有的一个例子:

<g id="534315CB-D724-44B3-9E05-F5E9A01EB398" style="fill: #FFFFFF;">
<circle r="5" class="seatH" id="B41BE3E7-B9D7-4069-9BE6-0E61324E4633" stroke="#FF6688" stroke-width="1.5"
        data-status="S" cx="515.157" cy="539.223" data-tsdesc="Section1_AD_25" onclick="openPriceTypeSection(evt);"
        touchstart="openPriceTypeSection(evt);"
        onmouseover="showTooltip(evt);" onmouseout="hideTooltip();" data-nickname="Bob" data-clan="Lfgg"
        fill="#F2732E"></circle>
<circle r="5" class="seatH" id="92BCED0B-A493-4254-961F-16EEA7EB78D2" stroke="#FF6688" stroke-width="1.5"
        data-status="H" cx="527.054" cy="539.223" data-tsdesc="Section1_AD_26" onclick="openPriceTypeSection(evt);"
        touchstart="openPriceTypeSection(evt);"
        onmouseover="showTooltip(evt);" onmouseout="hideTooltip();"></circle>
<circle r="5" class="seatH" id="A3E73119-BEA7-4F88-A4B0-68C6024017D5" stroke="#FF6688" stroke-width="1.5"
        data-status="S" cx="539.942" cy="539.223" data-tsdesc="Section1_AD_27" onclick="openPriceTypeSection(evt);"
        touchstart="openPriceTypeSection(evt);"
        onmouseover="showTooltip(evt);" onmouseout="hideTooltip();" data-nickname="Adz" data-clan="Endpoint"
        fill="#014189"></circle>
<circle r="5" class="seatH" id="89412E32-5B14-4C62-83F0-2BAFDF7566F7" stroke="#FF6688" stroke-width="1.5"
        data-status="S" cx="551.839" cy="539.223" data-tsdesc="Section1_AD_28" onclick="openPriceTypeSection(evt);"
        touchstart="openPriceTypeSection(evt);"
        onmouseover="showTooltip(evt);" onmouseout="hideTooltip();" data-nickname="Zai0s" data-clan="Endpoint"
        fill="#014189"></circle>
<circle r="5" class="seatH" id="B3D07687-8F2E-4A3B-B6AF-AEA296C13425" stroke="#FF6688" stroke-width="1.5"
        data-status="S" cx="563.736" cy="539.223" data-tsdesc="Section1_AD_29" onclick="openPriceTypeSection(evt);"
        touchstart="openPriceTypeSection(evt);"
        onmouseover="showTooltip(evt);" onmouseout="hideTooltip();" data-nickname="Zai0s" data-clan="Endpoint"
        fill="#014189"></circle>

我尝试了以下内容,但没有任何喜悦:

$('circle').each(function (index) {

      console.log($( this ).attr('id') );
    });

有没有具体的方法来做到这一点?

0 个答案:

没有答案