jQuery accessing html5 data attribute

Question

On click of one of the options I am trying to get the data value from the 'ul li a' and place it into button below, I've set up a fiddle example here: http://jsfiddle.net/q5j8z/4/

But cant seem to get it working

$('ul li a').click(function(e) {
    e.preventDefault();

    var value = $(this).data();

    $('.button').data('value');
});

Does anyone have any ideas please?

Answer 1

You can do this:

$('ul li a').click(function (e) {
    e.preventDefault();
    var value = $(this).data('value');
    $('.button').data('value', value);
    console.log($('.button').data('value'));
});

Here, $(this).data('value') is used to get the data attribute value of the link.

and $('.button').data('value', value) is used to set the data attribute value of the button.

Using, console.log($('.button').data('value')); you can check the console the data value being set.

FIDDLE DEMO

For more info:- .data() API Documentation

Answer 2

Use it like this:

var value = $(this).data('value');

And then:

$('.button').data('value', value);

Answer 3

You are not assigning the value data to the button actually. Try this:

$('ul li a').click(function(e) {
    e.preventDefault();

    var value = $(this).data();

    // assign the value form the clicked anchor to button value data
    $('.button').data('value', value);

    console.log($('.button').data('value'));
});