Question

我有一个html元素，想要在OnClick事件中读取数据属性

<a id="downloadFile" class="btn btn-success" href="javascript:;" data="MyData">Download file</a>

如果我使用下面的代码，请参阅href属性而不是A元素。如何引用A元素并读取数据值？

 $('#downloadFile').click(function() {            
  alert(this.attr('data')); //I get error that 'href' do not has 'data' attribute, this code refers to href attribute and not to A element
});

Answer 1

在事件处理程序的上下文中，this引用DOM元素，而不是jQuery对象。使用$(this)获取jQuery对象，以便您可以使用attr函数：

$('#downloadFile').click(function() {            
  alert($(this).attr('data'));
});

另一种选择是使用this.getAttribute("data")。

<强> DEMO

Answer 2

您可以拥有自定义数据属性，并将其与-

分开

<强> Live Demo

<a id="downloadFile" class="btn btn-success" href="javascript:;" data-yourhref="MyData">Download file</a>   

     $('#downloadFile').click(function() {            
        alert($(this).data('yourhref')); //Get error that href do not has data atribute, this refered to href atribute and not to A element
    });

Answer 3

您使用此方法引用js对象，但使用jquery语法。

尝试：

$(this).attr('href')

Answer 4

仅为Jquery

的正确选择器更改此项

$('#downloadFile').click(function() {            
          alert($('#downloadFile').attr('data')); //Get error that href do not has data atribute, this refered to href atribute and not to A element
        });

在OnClick事件中读取元素属性

4 个答案: