悬停时更改内部HTML

Question

I'm very new to jQuery and Javascript development. I've quickly cooked up an idea for a site navigation that utilizes html data tags to generate link descriptions. I've got it set up in a fiddle here . My problem is that the jquery is not functioning as intended. I am too new to identify what the error may be. I would greatly appreciate any tips. Thank you in advance!

Here is the code snippet for the 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

You're not wrapping this as a jQuery object.

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

While you're at it, might as well use jQuery for the other line as well.

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

Answer 2

jQuery way should look like this:

$(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();
    });
});

Recommendations:

1. Don't mesh native javascript getElementById() and so on with jQuery selectors.

2. Use $(function () {}); patterns instead of document.ready .

Answer 3

this in the scope of the jQuery event handlers refers to the DOM element and not a jQuery object. So you need to wrap this with $ to give you the jQuery version ie $(this) .

The way jQuery works you should find the following is true $(this)[0] === this . ie the jQuery object will have an array of DOM elements that were matched by the selector.

I think because you're new to jQuery this might help....

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

this is a DOM element

When is this a DOM element? The short answer is - usually. Scripting with jQuery quite often involves the use of callback functions. Whether handling an event, iterating a collection of nodes, animating an image, or applying a dynamic filter, callbacks are used to invoke your custom code at the appropriate time. To make things easy for you, jQuery sets the scope of the callback function to the element which is the subject of the callback.

... and a rewrite of your code

$(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

Actually this refers to list node which has not data() method

so you should use dataset property something like

should be

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

instead of

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

DEMO