jquery - li 属性返回未定义

Question

我的引导页面侧面有一个导航列表，我想在每次单击时获取每个项目的自定义属性的值。我尝试了许多不同的方法，但我似乎无法弄清楚为什么该属性一直返回未定义。

这是一些示例 HTML：

<ul id="list" class="nav nav-list">              
    <li class=""><a href="#" myval="firstValue">Item 1</a></li>
    <li class="active"><a href="#" myval="secondValue">Item 2</a></li>
</ul>

这是jQuery：

$('#list').on('click', 'li:has(a[href^="#"])', function () {
    var currentVal= $(this).attr('myval');
    alert(currentVal);
});

Answer 1

您的自定义属性不在 LI 上。你必须从它的孩子那里得到属性。

var currentVal= $(this).children('a').attr('myval');

Answer 2

不要使用myval，但是data-myval：

<a href="#" data-myval="firstValue">

$("#list").on('click', 'li:has(a[href^="#"])', function () {
    alert($(this).children('a[href^="#"]').data('myval'));
});

另请注意，单击的目标是li并且:has不选择任何内容。您也可以a通过删除来绑定到:has。