Question

案例1 ：使用＆＃39; onclick＆＃39;锚元素的属性

<a href='#' onclick='modifyCustomerDetails()' data-action='modifyCustAction' data-params='customerId=567'>Modify Customer</a>

function modifyCustomerDetails() {
    var srcEl = $(this); 
    console.log("ACTION::"+srcEl.data('action')) ;  
    console.log("PARAMS::"+srcEl.data('params')) ;          
}

浏览器控制台中的输出为
未定义
未定义

案例2：使用jquery

锚定元素绑定

$('a').bind('click', function() {

  var srcEl = $(this); 
  console.log("ACTION::"+srcEl.data('action')) ;    
  console.log("PARAMS::"+srcEl.data('params')) ;    
})

浏览器控制台中的输出
modifyCustAction
客户ID = 567

我读到jQuery将回调函数的范围设置为回调主题的元素。

为什么数据属性在案例1＆amp;中不可访问/未定义？仅在案例2中可访问？
如何在案例1中访问锚元素的数据属性？

Answer 1

案例1：

<a href='#' onclick='modifyCustomerDetails(this)' data-action='modifyCustAction' data-params='customerId=567'>Modify Customer</a>

function modifyCustomerDetails(obj) {
    console.log("ACTION::"+$(obj).attr('data-action')) ;  
    console.log("PARAMS::"+$(obj).attr('data-params')) ;          
}

Answer 2

案例1 在函数

中传递this

<a href='#' onclick='modifyCustomerDetails(this)' 
data-action='modifyCustAction' data-params='customerId=567'>Modify Customer</a>

function modifyCustomerDetails(currObj) {
    var srcEl = $(currObj); 
    console.log("ACTION::"+srcEl.data('action')) ;  
    console.log("PARAMS::"+srcEl.data('params')) ;          
}

Answer 3

添加id =＆＃34; modify_customer＆＃34;到您的锚标签
并使用此jquery代码

修改客户

$（function（）{

var a = $（＆＃34; #modification_customer＆＃34;）。data（＆＃39; params＆＃39;）

警报（a）中

}）;

它会给出结果
＆＃34;客户ID = 567＆＃34;

Answer 4

我不明白你的问题，但我想你想要这个

$('a').click(function(){
var propty= $(this); 
var action =propty.attr("data-action");
});

如何在Jquery中访问锚标记的数据属性？

4 个答案: