Question

我的代码如下，

<div class="apples" data-id="1"></div>
<div class="apples" data-id="2" id="secondDiv"></div>

每个div都有一个onClick事件监听器。当我单击div时，根据单击的div，会发生一些独特的事情。例如，

$(".apples")[0].addEventListener("click", function(){
    console.log("first apple was clicked"); 
});

我的问题是关于数据属性。点击后，我想知道点击的div的数据属性。

这有效，

$("#secondDiv").data("id"); //returns 2

这不，

$(".apples")[1].data("id"); //returns TypeError: $(...)[1].data is not a function

这没用，

$(".apples").data("id"); //returns 1

如何使用classname获取div的data-attribute？代码中实际的div数量太大，无法为每个实例提供唯一的HTML ID。

由于

Answer 1

下面将记录带有单击的apple css类的元素的data-id属性值。：

 $(".apples").on("click", function(){
      console.log($(this).data("id")); 
 });

Answer 2

data是一个jQuery方法，仅适用于jQuery对象包装器。

$(".apples")是一个jQuery对象包装器，因此具有data方法。

$(".apples")[1]是一个DOM对象，因此没有data方法。

然后，你可以

再次将DOM对象包装在jQuery对象中：
```
$($(".apples")[1]).data("id");
```
使用eq，它将只返回jQuery包装器中的所需元素：
```
$(".apples").eq(1).data("id");
```

使用vanilla-js读取数据属性：

$(".apples")[1].dataset.id;
$(".apples")[1].getAttribute('data-id');

Answer 3

这是我的代码！希望你喜欢它：

<!DOCTYPE html>
<html lang = 'es'>
    <head>
        <title> MY TEST </title>
        <meta charset = 'utf-8'>
        <style>
            .apples{
                width: 300px;
                height: 300px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="apples" data-id="1" id = 'firstDiv'>APPLE 1</div>
        <br>
        <div class="apples" data-id="2" id= 'secondDiv'>APPLE 2</div>
        <script>

            //Getting the references to the "apples"
            var apple1 = document.getElementById('firstDiv');
            var apple2 = document.getElementById('secondDiv');

            //Adding the events listeners
            apple1.addEventListener('click', doTheMagic);
            apple2.addEventListener('click', doTheMagic)

            function doTheMagic(e){
                alert('You clicked an apple ');
                var dataApple = e.target.getAttribute('data-id');
                alert('This apple has a value for his data-id of: ' + dataApple);
            }
        </script>
    </body>
</html>

如何使用classname作为选择器来获取类成员的data属性？

3 个答案: