Question

我正在从模板引擎（Template7）生成列表，并将userID添加到每个列表项中的数据标记中。例如

<li>
    <a id='user' data-user-id='5'>
        <div>content here</div>
    </a>
</li>
<li>
    <a id='user' data-user-id='6'>
        <div>content here</div>
    </a>
</li>

我正在努力获得＆＃34;用户ID＆＃34;使用jQuery点击列表项的数据，但我似乎正在做的是获取第一个列表项的用户ID - 在这种情况下总是5。

$(document).on("touchend", "#user", function(e) {
    e.preventDefault();

    var userItem = $("#user");
    var userID = userItem.data("user-id");
    console.log(matchID);
});

我哪里错了？每个项目的唯一ID都可以使用，但是需要对其进行解析等，所以必须有更好的方法！这种事情有最好的做法吗？

Answer 1

在每个锚项上使用css类，如下所示：

 <li>
    <a class='user' data-user-id='5'>
        <div>content here</div>
    </a>
</li>

Id属性对于该元素而言是唯一的。

Answer 2

尝试替换#user，这应该适合你的情况

Id选择器始终选择具有匹配Id的第一个元素。建议不要让多个元素具有相同的id。尝试使用类名。您可以在代码下方使用任何查询方式。

$(document).on("touchend", "#user", function(e) {
        e.preventDefault();

        var userID = $(this).data("user-id");
        console.log(userID);
    });

Answer 3

To get the content of the attribute **data-user-id** like in <a id='user' data-user-id='5'> you have to use

$(this).attr("data-user-id") // will return the string "5"

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("user-id") // will return the number 5

从模板生成列表中获取html数据 - JQuery

3 个答案: