Javascript jquery数据id未按预期工作_Javascript_Jquery

Javascript jquery数据id未按预期工作

javascript jquery

Javascript jquery数据id未按预期工作,javascript,jquery,Javascript,Jquery,我只是试图通过引用stackoverflow中先前解决的问题来获取html元素的数据id。我完全是在尝试相同的方法，但是没有定义。为什么会这样链接 $document.ready=>{ $'.a'。单击时，=>{ console.log$this.attrdata-id； } } 试试这个： <!DOCTYPE html> <html> <head> <title></title> </head> <bod

我只是试图通过引用stackoverflow中先前解决的问题来获取html元素的数据id。我完全是在尝试相同的方法，但是没有定义。为什么会这样

链接 $document.ready=>{ $'.a'。单击时，=>{ console.log$this.attrdata-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',function() {
                console.log($(this).data("id"));
            })

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

试试这个您创建的函数是错误的

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

或

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

我建议你读一下这个

是的，它在工作，但为什么是这样。两者都是一样的，对吗？attr和DATA不同你不能在这里使用箭头函数，因为“this”的含义不同：抱歉@AndrewChart，我不明白你的意思，你想说什么？抱歉，我不清楚。你的答案很好，但原始海报使用了箭头函数作为“单击”的回调。OP版本不起作用的原因是，当您使用箭头函数时，它的解释方式不同。它指的是创建函数的词汇环境，我发布的链接解释了这一点。当您使用传统的函数声明时，它指的是发生事件的元素，这是OP的目的所必需的。使用这个答案：它与您的jquery版本有关您的代码不正确，您必须阅读有关arrow函数的内容

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

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

  })
</script>

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