为什么在使用 JQUERY 从 HTML 元素获取数据值时数据属性显示未定义

Question

我正在尝试获取 HTML 元素的数据属性值，它显示未定义 object[] 对我来说没有任何用处。检查我的 fiddle.

$(document).on("click", ".modal-open", function() {
    var $_target = $($(this).data("targetlocation"));
    var $_url = $($(this).data("targeturl"));
    console.log($_target);
    console.log($_url);
})

Answer 1

您需要使用：

var $_target = $(this).attr("data-target-location");
var $_url = $(this).attr("data-target-url");

或

var $_target = $(this).data("target-location");
var $_url = $(this).data("target-url");

Working Demo

Answer 2

使用多个词的标识符时，需要使用camelCase表示法

var $_target = $(this).data("targetLocation"); //Notice L 
var $_url = $(this).data("targetUrl");

DEMO

Answer 3

    $(".modal-open").on("click", function() {

        var $_target = $(this).attr("data-target-location");
        var $_url = $(this).attr("data-target-url");
        alert($_target);
        alert($_url);
     });

使用它来获取属性

此处显示此演示 Demo There

Answer 4

如果您要使用此 html 元素

 <button type="button" class="modal-open" data-target-url="ajax.html" data-target-location=".overlay"> Modal open </button>

在按钮 "this" 上触发点击事件后将 return 相同的 html 元素，因此要获取此类型的当前数据属性值。

您应该使用 Camel Casing 表示法。

var $_target = $(this).data("targetLocation");
var $_url = $(this).data("targetUrl");

Working Example

为什么在使用 JQUERY 从 HTML 元素获取数据值时数据属性显示未定义

why data-attribute shows undefined while getting data value from HTML element using JQUERY

jquery

custom-data-attribute