javascript - 获取 li 元素内 anchor 元素的 data-id

Question

HTML

<ul>
  <li>
    <a href="" data-id="1" onclick="clickFunction();"></a>
  </li>
  <li>
    <a href="" data-id="2" onclick="clickFunction();"></a>
  </li>
  <li>
    <a href="" data-id="3" onclick="clickFunction();"></a>
  </li>
  <li>
    <a href="" data-id="4" onclick="clickFunction();"></a>
  </li>
  <li>
    <a href="" data-id="5" onclick="clickFunction();"></a>
  </li>
</ul>

我的应用程序在 5 秒后获得了一个事物列表。它会自动转到下一个li。但这不是问题所在。问题出在 click 函数上，我想知道 li 的 data-id。

Answer 1

根据OP的评论

• 删除onclick 属性。
• 使用 jQuery 绑定(bind)click 事件。
• 使用 closest('li') 获取链接的父链接。

function clickFunction(e) {
  e.preventDefault(); // This is to prevent the execution of your links!
  console.log($(this).closest('li').data('id'));
}

$('a').click(clickFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-id="1">
    <a href="">1</a>
  </li>
  <li data-id="2">
    <a href="">2</a>
  </li>
  <li data-id="3">
    <a href="">3</a>
  </li>
  <li data-id="4">
    <a href="">4</a>
  </li>
  <li data-id="5">
    <a href="">5</a>
  </li>
</ul>