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

Question

案例 1： 使用锚元素的 'onclick' 属性调用的函数

<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
customerId=567

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

为什么数据属性不是 accessible/undefined 在案例 1 & 仅在情况 2 中可访问？
如何在案例 1 中访问锚元素的数据属性？

Answer 1

案例 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 2

案例 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 3

将 id= "modify_customer" 添加到您的锚标签

并使用此 jquery 代码

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

$(function(){ 
var a = $("#modify_customer").data('params')
alert(a)
});

它会给出结果customerId=567

Answer 4

我不是很清楚你的问题，但我想你想要这个

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

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

How to access data attributes of anchor tag in Jquery?

jquery

html5-data