Javascript 如何访问处理不同输入的数据属性？

我有以下清单：

<ul class="nav nav-pills nav-pills-warning nav-pills-icons justify-content-center" role="tablist">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" data-role-slug="admin" href="#" "="" role="tablist">
            <i class="material-icons">supervisor_account</i> Admins                   
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active show" data-toggle="tab" data-role-slug="operator" href="#" role="tablist">
            <i class="material-icons">person</i> Operators                   
        </a>
    </li>
</ul>

该方法运行良好，唯一的问题是当用户单击

标记内的

标记时，在这种情况下

角色标签将
未定义

有没有办法不用硬代码来处理这个问题？
这是因为事件的目标是实际接收它的元素，而不是冒泡到的元素

但是你可以试着偷偷摸摸，也许可以试一下这样的东西

$('a[data-role-slug]').each((index, element) => {
    element.on('click', () => {
        let roleSlug = element.data('role-slug');
        console.log(roleSlug);
    });
});

或者，您可以使用
.parent
方法查找正确的元素

$('a[data-role-slug]').on('click', function (e) {
    let roleSlug = $(e.target).data('role-slug');
    if (!roleSlug) {
        roleSlug = $(e.target).parent('a[data-role-slug]').data('role-slug');
    }
    console.log(roleSlug);
});

只需在事件处理程序中使用
this
。它将是事件发生时所在的
实例，无论目标是哪个子对象

或者，
e.currentTarget
也将返回相同的实例

$('a[data-role-slug]').on('click', function (e) {
    let roleSlug = $(this).data('role-slug');
             // OR $(e.currentTarget).data('role-slug');
    console.log(roleSlug);
});

有没有避免迭代的方法？做了一个编辑，建议另一个不使用迭代的解决方案，使一个简单且非常常见的情况变得复杂
$('a[data-role-slug]').on('click', function (e) {
    let roleSlug = $(this).data('role-slug');
             // OR $(e.currentTarget).data('role-slug');
    console.log(roleSlug);
});