Question

编辑：忘了jsfiddle

我有一个由许多路径/形状组成的SVG图像，每个路径/形状都包含在<g>元素中，id。为了简单起见，我将我的例子限制为两种形状。

我还得到了一系列代表多种颜色的<div> s - 其中data-attribute可以匹配SVG形状<g> id。所以：

<svg width="428" height="230" xmlns="http://www.w3.org/2000/svg">
 <g id="square">
  <rect height="91" width="91" y="68.5" x="82.5"/>
 </g>
 <g id="circle">
  <ellipse ry="48" rx="48" id="svg_2" cy="111.5" cx="295.5"/>
 </g>
</svg>

<div class="colors" data-square="5" data-circle="0">Red</div>
<div class="colors" data-square="1" data-circle="3">Blue</div>
<div class="colors" data-square="0" data-circle="9">Green</div>

点击.color <div>后，我想：

将所有属性（键和值）存储在一个对象中（已完成），
过滤掉任何小于1的属性（我无法弄清楚的部分）
然后将类（.active）添加到任何svg <g>元素，其中id与属性键匹配（已完成，没有过滤）。

这是我的jQuery，以及我已尝试过滤data()对象的注释：

var shapes = $('svg g');

$('.colors').click(function () {
    //remove active class from all shapes
    $(shapes).attr("class", "");
    //store data attributes
    var colortotals = $(this).data();
    //filter attributes greater than 0
    //var colortotals = $(this).data().filter(function() {
      //return $(this) > "0";
    //});
    //add active class to any shape with id matching an attribute key
    $.each(colortotals, function(key, value) {
      alert(key + ": " + value);
      $(shapes).filter('#' + key).attr("class", "active");
    });

});

Answer 1

这是你在找什么？

$.each(colortotals, function(key, value) {
    if (Number(value) > 0) {

      $(shapes).filter('#' + key).attr("class", "active");
    }
});

http://jsfiddle.net/rMBPP/31/

很抱歉，如果我没有正确理解这个问题

按值过滤.data（）对象中的项目

1 个答案: