1

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

最后，我想使用loadorready事件最初设置图像，然后当然使用该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() 调用。如果您想等到加载某些内容，则应该使用加载事件，但在这种情况下，它是一个已经存在的 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/

所以从技术上讲，在 DOM 内部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 回答