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

Question

我有以下列表：

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

我需要获取属性data-role-slug我实际上以以下方式获取值：

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

该方法效果很好，当用户单击<a>标签内的<i>标签时，唯一的问题会发生，在这种情况下，roleSlug将为undefined。

有没有硬码的方法来处理此问题？

Answer 1

只需在事件处理程序内使用this即可。它将是<a>实例，事件发生在事件上，无论是哪个孩子的目标

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

Answer 2

那是因为事件的目标是实际收到的元素，而不是将其冒泡。

但是，您可以尝试偷偷摸摸，也许尝试这样的事情？

$('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);
});