Question

我需要获取长列表中特定点击链接的 datahours 等。我错过了什么？

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

我们如何以jQuery方式执行此操作。

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

演示http://jsfiddle.net/mattball/XBrfH/

Answer 2

如果你可以修改HTML，我强烈建议你使用数据属性。

HTML：

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

JS：

console.log($("a").data("key"), $("a").data("title"), $("a").data("address"), $("a").data("hours"));

http://jsfiddle.net/LDaMn/

Answer 3

从一个匹配多个元素的选择器请求属性时，您应该通过each函数

执行此操作

$('.item').each(function () { 
  console.log($(this).attr('datakey'));
});

Answer 4

您正在将点击监听器添加到document而不是a元素本身。如果您为每个a标记添加点击处理程序，您将获得所需的内容。

$(function() {
    $('a.item').click(function() {
         // this is the a tag you clicked.
         console.log($(this).attr("datakey"));
    });
});

Answer 5

你会想要这样的东西

$('.item').click(function() {
    var datahours = $(this).attr("datahours");
});

$(this)指的是点击的元素

的元素

Answer 6

目前，您正在获取课程.item的所有项目的数据小时（等）。您可以在点击事件中获取这些项目。

$(".item").click(function(){

    var datakey = $(this).attr("datakey");   
    var datatitle = $(this).attr("datatitle");
    var dataaddress = $(this).attr("dataaddress");
    var datahours = $(this).attr("datahours");

    // CONSOLE
    console.log(datakey);

    });

正如Xeon所指出的，不是使用无效的属性名称，而是使用数据属性。

Answer 7

一些事情。

您应该将点击事件直接附加到a标记。您的行$(this).click()可能附加到整个文档。 $('a.item').click()这种方式this将引用已点击的链接。
您应该列出您的数据属性，例如data-title和data-key。这样，您可以使用jQuery的$.data()，这样就可以$(this).data().key

Answer 8

试试这个

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var datakey = $(".item").attr("datakey");   
    var datatitle = $(".item").attr("datatitle");
    var dataaddress = $(".item").attr("dataaddress");
    var datahours = $(".item").attr("datahours");

    $(".item").click(function(){

        // CONSOLE
        console.log(datakey);

    });
})
</script>

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

为每个获取jQuery属性，而不仅仅是第一个

8 个答案:

HTML

的JavaScript

演示http://jsfiddle.net/mattball/XBrfH/