2

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/

4

1 に答える 1

2

最初にしたことは、必要なタイプを知る必要があるため、ボタンに 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/の更新されたフィドルを参照してください

于 2013-04-17T08:47:25.817 に答える