Javascript 从动态HTML元素检索jQuery数据返回未定义的

我试图从一个可变的HTML元素中检索数据。单击后，将检索

元素的id，我希望它使我能够动态地

$（[dynamic id]）

选择该元素并请求存储在数据属性中的数据

我的jQuery如下所示：

$( document ).ready( function() {
    $( ".checkmark" ).on( "click", ( event ) => {
        let checkBoxId = "#" + event.target.id, // #checkBox1
            checkBoxData = event.target.id + "-value", // checkBox1-value
            checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
    } );
} );

<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>

目标HTML元素如下所示：

$( document ).ready( function() {
    $( ".checkmark" ).on( "click", ( event ) => {
        let checkBoxId = "#" + event.target.id, // #checkBox1
            checkBoxData = event.target.id + "-value", // checkBox1-value
            checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
    } );
} );

<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>

let checkBoxValue的值未定义，我无法找出原因。

---

非常感谢您的帮助。

您可以在

jQuery

checkBoxValue = $(checkBoxId).attr(checkBoxData);

---

它返回未定义的

，因为它的声明不正确。

数据-

后面的部分应为小写。对你来说，一定是这样

<span class="checkmark" id="checkbox1" data-checkbox1-value=-155></span>

---

这段代码对我来说很有用，试试看；）

---

新的

（）=>{}

语法似乎存在范围问题

因此，您需要使用

{self:this}

将

this

绑定到函数事件处理程序。如果不想这样做，可以使用旧的

function（）{}

语法

$( document ).ready( function() {
    $( ".checkmark" ).on( "click", {self:this}, ( event ) => {
        var checkBoxValue = $(this).data("checkbox1-value")
        alert(checkBoxValue);
    } );
} );

正如@Erwin所提到的，在

数据-

属性名称中只使用小写字母：

<span class="checkmark" id="checkbox1" data-checkbox1-value="-155"></span>

---

不需要

checkBoxId

变量，因为您可以使用

this

关键字，因为它是您正在使用的当前元素

$(function() {
    $(".checkmark").on("click", (event) => {
        let checkBoxData = event.target.id + "-value";
        let checkBoxValue = $(this).data(checkBoxData);
    });
});

---

非常感谢各位的回复。喜欢这个开发者社区。：）@知道这件事真是太好了