Question

我只是试图通过在stackoverflow中引用先前解决的问题来获取html元素的data-id。我正在尝试相同但是未定义。为什么会这样？

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a data-id="123" class="a">link</a>
	<script type="text/javascript">
		$(document).ready(() => {
			$('.a').on('click',() => {
				console.log($(this).attr("data-id"));
			})
			
		})
	</script>
</body>
</html>

＆＃13;

Answer 1

您使用() => 箭头功能来使用ES6，这就是为什么不使用您的代码。它是您使用() => {}代替function () { }所要求的具体功能：

<script type="text/javascript">
  $(document).ready(() => {
    $('.a').on('click', function() {
      console.log($(this).data('id'));
    });

  })
</script>

解决此特定问题的方法不是使用它来获取对被点击元素的访问权限，而是使用event.currentTarget：

<script type="text/javascript">
  $(document).ready(() => {
    $('.a').on('click', (e) => {
      console.log($(e.currentTarget).data('id'));
    });
  })
</script>

我建议你阅读documentation Arrow_functions

Answer 2

试试这个你创建的功能是错误的。

$('a').click(function(){
    console.log($(this).data('id'));
})

OR

$('a').on('click',function(){
    console.log($(this).attr('data-id'));
})

Answer 3

试试这个：

jquery data-id未按预期工作

3 个答案: