单击时显示某些拉斐尔形状

Question

有一个good answer 介绍如何在 jQuery 对象上调用 Raphael 方法。它完美地工作。但我需要更多功能。我想在单击按钮时显示形状宽度某些属性。在那个答案中，我只能影响数组中的所有形状。我怎样才能过滤它们？我使用了那段代码：

$("button").click(function() {
    $.each(cottages_array, function(i, c){
        c.animate({fill: '#55bfe1', opacity: 1}, speed_anim_in);
    });
});

我的形状有属性类型，我只想突出显示特定类型的形状（例如类型 A）。在循环内，我可以用不同的颜色填充不同的类型，但我不知道如何使用jQuery对循环外的点击应用任何条件。

for (var j = 0; j < obj.cottages.length; j++) {
    var obj_cottages = obj.cottages[j],
    my_path = canvas.path(obj_cottages.coords);
        my_path
            .attr({stroke: "none", fill: cottage_color_start, "fill-opacity": 0.8, opacity: 0, cursor: "pointer"})
            .data('type', obj_cottages.type)

if (obj_cottages.type == 'A') {
    my_path
        .attr({stroke: "none", fill: "#fff", "fill-opacity": 0.8, opacity: 0, cursor: "pointer"})
}

我花了一整天的时间试图弄清楚该怎么做，但我一点运气都没有。

http://jsfiddle.net/Fionaa/5BYK6/

Answer 1

我做的第一件事是为你的按钮添加一个 id，因为我们需要知道我们想要哪种类型：

<button id="A">Type А</button>
<button id="B">Type B</button>
<button id="C">Type C</button>

接下来我找到点击的按钮的id：

// get id of button which was clicked
var type = this.id;

然后我创建一个临时集合来存放该类型的小屋：

// create temporary set
var set = canvas.set();

然后在你的循环中，我找到与点击类型相同的山寨类型，并添加到临时集合中

// loop all cottages and find the type we want
    c.forEach(function(el){

        // put cottages in the temp set
        if(el.data("type") == type){
            set.push(el);
        }

    });

最后为这个临时集合制作动画

// animate this set
    set.animate({fill: '#55bfe1', opacity: 1}, speed_anim_in);

我有一个小提琴给你 - http://jsfiddle.net/5BYK6/1/

编辑

好的，我添加了以下内容：

// fade any previous set
    if(prevSet) {
        prevSet.animate({opacity: 0}, speed_anim_out);
    }

// store current set to remove later
    prevSet = set;

基本上我们存储我们创建的上一个集合，并检查 prevSet 中是否存在一个，我们使用您的 speed_anim_out 变量将动画设置为 opacity: 0。

查看更新的小提琴http://jsfiddle.net/5BYK6/2/