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

tez616oj 于 2023-03-17 发布在 jQuery

关注(0)|答案(4)|浏览(168)

**CASE 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')) ;    
})

浏览器控制台中的输出
修改客户操作
客户ID =567
我听说jQuery将回调函数的作用域设置为回调对象的元素。
1.为什么数据属性在案例1中不可访问/未定义，而只有在案例2中才可访问？
1.案例1中如何访问锚元素的数据属性？

jquery

来源：https://stackoverflow.com/questions/37026345/how-to-access-data-attributes-of-an-anchor-tag-in-jquery

4条答案

按热度按时间

46qrfjad1#

案例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')) ;          
}

赞(0）回复(0）举报 2023-03-17

ykejflvf2#

用例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')) ;          
}

赞(0）回复(0）举报 2023-03-17

ujv3wf0j3#

4.我没听清楚你的问题，但我想你是想这样做

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

赞(0）回复(0）举报 2023-03-17

nxagd54h4#

添加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

赞(0）回复(0）举报 2023-03-17

我来回答

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

4条答案

相关问题

热门标签

最新问答