Question

I need to get the datahours, etc. for the specific clicked link within a long list. What am I missing?

HTML:

<ul>
<li><a href="#" class="item" title="Gallery" datakey="1" datatitle="A+D Gallery" dataaddress="123 Main St" datahours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
<li><a href="#" class="item" title="Radio" datakey="2" datatitle="Radio" dataaddy="321 Center Dr" datahours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li></ul>

JS:

    $(function() {
    var datakey = $(".item").attr("datakey");   
    var datatitle = $(".item").attr("datatitle");
    var dataaddress = $(".item").attr("dataaddress");
    var datahours = $(".item").attr("datahours");

    $(this).click(function(){

        // CONSOLE
        console.log(datakey);

    });

}) // DOM Ready

Answer 1

How about we do this the jQuery way.

HTML

<ul id="items">
    <li><a href="#" class="item" title="Gallery" data-key="1" data-title="A+D Gallery" data-address="123 Main St" data-hours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
    <li><a href="#" class="item" title="Radio" data-key="2" data-title="Radio" data-address="321 Center Dr" data-hours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li>
</ul>

JavaScript

$(function()
{
    $('#items').on('click', 'a.item', function ()
    {
        console.log($(this).data('key'));
        return false;
    });
});

Demo http://jsfiddle.net/mattball/XBrfH/