0

私は次の基本的なコードを持っています、ここにjsfiddleがあります：http：//jsfiddle.net/fLZKc/

<div id="menu">
    <ul>
        <li>
            <a href="#" class="chat"><span>Chat</span></a>
        </li>
        <li>
            <a href="#" class="heart"><span>Heart</span></a>
        </li>
        <li>
            <a href="#" class="documentation"><span>Documentation</span></a>
        </li>
    </ul>
</div>

そしてこのjavascript：

var bubble = "M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z", 
    heart = "M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z", 
    documentation = "M26.679,7.858c-0.176-0.138-0.404-0.17-0.606-0.083l-9.66,4.183c-0.42,0.183-0.946,0.271-1.486,0.271c-0.753,0.002-1.532-0.173-2.075-0.412c-0.194-0.083-0.356-0.176-0.471-0.259c0.042-0.021,0.09-0.042,0.146-0.064l8.786-3.804l1.31,0.561V6.612c0-0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.406-0.17-0.605-0.083l-9.66,4.183c-0.298,0.121-0.554,0.268-0.771,0.483c-0.213,0.208-0.397,0.552-0.394,0.934c0,0.01,0.003,0.027,0.003,0.027v14.73c0,0.006-0.002,0.012-0.002,0.019c0,0.005,0.002,0.007,0.002,0.012v0.015h0.002c0.021,0.515,0.28,0.843,0.528,1.075c0.781,0.688,2.091,1.073,3.484,1.093c0.66,0,1.33-0.1,1.951-0.366l9.662-4.184c0.255-0.109,0.422-0.383,0.422-0.692V8.471C26.961,8.227,26.855,7.996,26.679,7.858zM20.553,5.058c-0.017-0.221-0.108-0.429-0.271-0.556c-0.176-0.138-0.404-0.17-0.606-0.083l-9.66,4.183C9.596,8.784,9.069,8.873,8.53,8.873C7.777,8.874,6.998,8.699,6.455,8.46C6.262,8.378,6.099,8.285,5.984,8.202C6.026,8.181,6.075,8.16,6.13,8.138l8.787-3.804l1.309,0.561V3.256c0-0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.407-0.17-0.606-0.083l-9.66,4.183C5.379,6.864,5.124,7.011,4.907,7.227C4.693,7.435,4.51,7.779,4.513,8.161c0,0.011,0.003,0.027,0.003,0.027v14.73c0,0.006-0.001,0.013-0.001,0.019c0,0.005,0.001,0.007,0.001,0.012v0.016h0.002c0.021,0.515,0.28,0.843,0.528,1.075c0.781,0.688,2.091,1.072,3.485,1.092c0.376,0,0.754-0.045,1.126-0.122V11.544c-0.01-0.7,0.27-1.372,0.762-1.856c0.319-0.315,0.708-0.564,1.19-0.756L20.553,5.058z";

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40)
    chat.path(bubble).attr({
        "fill" : "#333"
    })
})

$('.heart').each(function(i) {
    paper = Raphael($(this)[0], 40, 40)
    paper.path(heart).attr({
        "fill" : "#333"
    })
})
$('.documentation').each(function(i) {
    paper = Raphael($(this)[0], 40, 40)
    paper.path(documentation).attr({
        "fill" : "#333"
    })
})

各アイコンにホバーアクションを付けようとしています。これにより、ユーザーがメニュー項目にカーソルを合わせると、アイコンの色が変わります。

次のようにマウスオーバーを追加すると、次のようになります。

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40);
    chat.path(bubble).attr({
        "fill" : "#333"
    })
    chat.mouseover(function() {
        $(this).attr({
            "fill" : "#fff"
        });
    });
})

「UncaughtTypeError：Object＃has nomethod'mouseover''」というエラーが表示されます

これを行う正しい方法は何でしょうか？また、コードを簡略化できますか？

4

1 に答える 1

1

ここでいくつかの問題：

  1. mouseoverラファエル紙（キャンバス）に追加されています。代わりに、シェイプに追加する必要があります。
  2. このコードは、Raphael形状参照とjQuery要素参照を混合しています。イベントの所有者（ラファエルの形）を参照するために、場合によって$(this)はに置き換える必要があります。this
  3. マウスアウトで反対の動作をする場合は、Raphaelhoverを使用して両方のハンドラーをシェイプに結び付ける必要があります。

コードスニペットの例でこれらを要約してみましょう。

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40);
    var shape = chat.path(bubble).attr({
        "fill": "#333"
    });
    shape.hover(function() {
        this.attr({
            "fill": "#fff"
        });
    }, function() {
        this.attr({
            "fill": "#333"
        });
    });
})

更新されたjsFiddleを参照して、さらに操作することができます。

于 2012-09-12T08:41:21.110 に答える