Question

现在，请记住，我只是想通过在此处使用ready事件来确保代码正常工作。我只是想确保我期望的数据被jQuery拉动。我也尝试了load事件。

最后，我想使用load或ready事件初始设置图片，然后使用hover事件在悬停时更改该图片。< / p>

我在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语句，它会按预期工作。我可以使用什么事件进行初始化？

Answer 1

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

您不需要括号[]

Answer 2

问题是你的.ready（）调用。你应该使用load event，如果你想等到加载某些东西，但在这种情况下它是一个已经存在的li元素，所以你的代码应该是：

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

    test.hover(function() {});
});

Answer 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/

Answer 4

应为alert($(this).data("selectedimage"));

请看这里：HTML5 data-* Attributes。

使用jQuery获取数据属性

修改

4 个答案: