1

readyここでイベントを消費することにより、コードが機能することを確認しようとしていることを覚えておいてください。期待するデータがjQueryによってプルされていることを確認したいだけです。私もloadイベントに参加しました。

load最後に、 orreadyイベントを使用して最初に画像を設定し、次にhoverイベントを使用してホバー時にその画像を変更したいと思います。

私はここSOで多くの答えを試しましたが、これがうまくいかないようですので、うまくいけば、すべてが私を助けることができます。

JavaScript：

$(document).ready(function () {
    $("#submenumain-link").ready(function () {
        alert($(this).data()["selectedimage"]);
        alert($(this).data()["hoverimage"]);
    });

    $("#submenumain-link").hover(function () {
        alert($(this).data("selectedimage"));
        alert($(this).data("hoverimage"));
    });
});

HTML：

<li id="submenumain-link"
    data-selectedimage="some-image.png"
    data-hoverimage="some-other-image.png">

しかし、何らかの理由で、alertメッセージは未定義とだけ述べられています。ここで何かが足りませんか？

編集

alert同じステートメントをホバーに置くと、期待どおりに機能することに注意してください。初期化を行うためにどのイベントを使用できますか？

4

4 に答える 4

5 
$(this).data('selectedimage');

角かっこは必要ありません[]

于 2012-10-29T21:41:04.353 に答える
3

問題は.ready（）呼び出しです。何かがロードされるまで待機する場合は、 loadイベントを使用する必要がありますが、この場合、それはすでに存在するli要素であるため、コードは次のようになります。

$(document).ready(function() {
    var test = $("#submenumain-link");
    alert(test.data('selectedimage'));
    alert(test.data('hoverimage'));

    test.hover(function() {});
});
于 2012-10-29T21:41:18.990 に答える
3

本当の問題はready、このように使用されるべきではないということです。このreadyイベントは、DOM の準備が整っていることを確認する場合にのみ使用する必要があります - http://api.jquery.com/ready/

したがって、技術的には、 内でdocument.readyすべての DOM の準備ができており、これらの種類のものに使用できるはずです。の内部ではdocument.ready、 の値が要素をthis参照するdocumentため、実際に要素を取得する必要がありますli。コードは次のようになります。

$(document).ready(function () {
    var li = $("#submenumain-link");
    alert(li.data()["selectedimage"]);  // or li.data("selectedimage")

    li.hover(function () {
        //alert($(this).data("selectedimage"));
        //alert($(this).data("hoverimage"));
    });
});

http://jsfiddle.net/XN2LV/

于 2012-10-29T22:06:17.667 に答える
2

そのはずalert($(this).data("selectedimage"));

ここを見てください：HTML5データ-*属性。

于 2012-10-29T21:41:33.957 に答える