jQuery的数据ID无法正常工作

Question

我只是想通过引用之前在stackoverflow中解决的问题来获取html元素的data-id，我正在尝试相同的操作，但是却变得不确定，为什么呢？

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

Answer 1

您通过使用() => Arrow Function使用ES6，这就是为什么不使用代码的原因。 这是您通过使用() => {}而不是function () { }所要求的特定功能：

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

  })
</script>

解决此特定问题的方法不是使用它来访问clicked元素，而是使用event.currentTarget ：

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

我建议您阅读本文档Arrow_functions

Answer 2

尝试此操作您创建的函数错误。

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

要么

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

Answer 3

尝试这个：

<!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',function() {
                console.log($(this).data("id"));
            })

        })
    </script>
</body>
</html>

jQuery的数据ID无法正常工作

问题描述

3 个解决方案

解决方案1
1 2018-06-17 19:45:38

解决方案2
0 2018-06-17 19:38:11

解决方案3
-2 2018-06-17 19:37:38

jQuery的数据ID无法正常工作

问题描述

3 个解决方案

解决方案1 1 2018-06-17 19:45:38

解决方案2 0 2018-06-17 19:38:11

解决方案3 -2 2018-06-17 19:37:38

解决方案1
1 2018-06-17 19:45:38

解决方案2
0 2018-06-17 19:38:11

解决方案3
-2 2018-06-17 19:37:38