时间戳

首页 > 解决方案 > 获取链接函数中单击元素的数据属性

javascript - 获取链接函数中单击元素的数据属性

问题描述

在如下场景中如何进入imgt控制台： 

function test(e){
let tg = e.target.attr('data-tg');
console.log(tg); // error - target is undefined
}

$('button').on('click', function(e){
let fn = $(this).attr('data-fn');
window[fn]();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-tg='imgt' data-fn='test'>CLICK</button>

标签： javascriptjquery

解决方案

就其自身而言，e.target它只是一个元素，并不能发挥.attr()作用。这应该显示在您的控制台中。

此外，您不向函数传递任何参数。考虑以下。

function test(e) {
  if (e == undefined) {
    console.log("Event is Undefined");
    return false;
  }
  let tg = $(e.target).data('tg');
  console.log(tg); // error - target is undefined
}

$("#btn-1").on('click', function(event) {
  let fn = $(this).data('fn');
  window[fn](event);
});
$("#btn-2").on('click', function(event) {
  let fn = $(this).data('fn');
  window[fn]();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn-1" data-tg='imgt' data-fn='test'>Test 1</button><button id="btn-2" data-tg='imgt' data-fn='test'>Test 2</button>

推荐阅读