返回调用方数据值的 jQuery 函数

Question

如何返回锚标记的data-test值，以便我可以在具有不同data-test值的锚点上使用此函数？

<a href='#' data-test='some text'></a>

function getAnchor(){
    // do stuff
    console.log($(this).data('test'));
}
$('a').on('click',function(e){
    e.preventDefault; //prevent anchor behaviour.
    getAnchor();
});

Answer 1

您有以下几种选择：

将对函数的this引用作为参数传递：

function getAnchor(el) {
    console.log($(el).data('test'));
}
$('a').on('click', function(e){
    e.preventDefault();
    getAnchor(this);
});

示例小提琴

使用 call 设置正在执行的函数的上下文：

function getAnchor() {
    console.log($(this).data('test'));
}
$('a').on('click', function(e){
    e.preventDefault();
    getAnchor.call(this);
});

示例小提琴

提供函数对click处理程序的引用：

function getAnchor(e) {
    e.preventDefault();
    console.log($(this).data('test'));
}
$('a').on('click', getAnchor);

示例小提琴

Answer 2

函数

中$(this)的问题将不涉及任何内容

function getAnchor(element){
  //do stuff
  console.log($(element).data('test'));
}
$('a').on('click',function(e){
  e.preventDefault(); //prevent anchor behaviour.
  getAnchor($(this));  // or getAnchor(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' data-test='some text'>Click Me</a>