Question

我对jQuery和Javascript开发非常陌生。我已经快速制定了一个利用html数据标签生成链接描述的网站导航的想法。我把它设置在一个小提琴here中。我的问题是jquery没有按预期运行。我太新了，无法确定错误是什么。我非常感谢任何提示。提前谢谢！

以下是jquery的代码片段：

$(document).ready(function () {
$(".nav-button").hover(function (e) {
    var description = this.data('title') + ' <span>' + this.data('description') + '</span>';
    document.getElementById('nav-description').innerHTML = description;

}, function (e) {
    document.getElementById('nav-description').innerHTML = '';
});
});

Answer 1

您没有将this包装为jQuery对象。

var description = $(this).data('title') + ' <span>' + $(this).data('description') + '</span>';
                 ^^^

虽然您正在使用它，但也可以将jQuery用于其他行。

$('#nav-description').html(description);

Answer 2

jQuery方式应如下所示：

$(function () {
    $(".nav-button").hover(function (e) {
        var description = $(this).data('title') + ' <span>' + $(this).data('description') + '</span>';
        $('#nav-description').html(description);
    }, function (e) {
        $('#nav-description').empty();
    });
});

建议：

不要使用jQuery选择器对原生javascript getElementById()等进行网格划分。
使用$(function () {});模式代替document.ready。

Answer 3

jQuery事件处理程序范围内的

this引用DOM元素而不是jQuery对象。所以你需要用this包裹$来给你jQuery版本，即$(this)。

jQuery的工作方式应该是$(this)[0] === this。即jQuery对象将具有由选择器匹配的DOM元素数组。

我认为因为你是jQuery的新手，这可能会有所帮助......

http://www.learningjquery.com/2007/08/what-is-this/

此是一个DOM元素

这是一个DOM元素？简短的回答是 - 通常。使用jQuery编写脚本通常涉及使用回调函数。无论是处理事件，迭代节点集合，动画图像还是应用动态过滤器，回调都用于在适当的时间调用您的自定义代码。为了方便您，jQuery将回调函数的范围设置为回调主题的元素。

...并重写代码

$(document).ready(function () {
    $(".nav-button").hover(function (e) {
        var $this = $(this),
            description = $this.data('title') + ' <span>' + $this.data('description') + '</span>';
        $('#nav-description').html(description);            
    }, function (e) {
        $('#nav-description').html('');
    });
});

Answer 4

实际上this是指没有data()方法

的列表节点

所以你应该使用类似

的dataset属性

应该是

this.dataset['title'];
this.dataset['description'];

而不是

this.data('title');
this.dataset('description');

DEMO

在悬停时更改内部HTML

4 个答案: