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