在jQuery中将选择器作为函数参数传递

Question

小提琴示例

我可以将$(this)选择器以外的选择器作为函数参数传递吗？

我的意思是我要传递的选择器(#Aarea和Barea)是我想要添加一些HTML内容的选择器.

function info(a){
  var source = $(this).data('source')
  $(a).html(source)
  console.log(source);
}

$('#one').click(info('#Aarea'))
$('#two').click(info('#Barea'))

<button data-source="AAA" id='one'>Button</button>
<div id="Aarea"></div>
<div id='Barea'></div>
<a href='#' data-source='BBB' id='two'>Click</a>

但除非我不使用参数并在函数中指定那些选择器,否则它不起作用.

Answer 1

你的代码是什么:

$('#one').click(info('#Aarea'))

...正在调用 info并将其返回值传递给click,就像foo(bar()) 调用 一样bar,并将其返回值传递给foo.

你想要给的click是一个打电话的功能.在您的情况下,最简单的方法是使用包装函数:

$('#one').click(function() {
    info(this, '#Aarea');
});

...并更新info以接受元素作为参数:

function info(element, a){
  var source = $(element).data('source')
  $(a).html(source)
  console.log(source);
}

更新小提琴

或者,您可以使用它Function#call来调用原始内容info而无需更改它:

$('#one').click(function() {
    info.call(this, '#Aarea');
});

Function#call调用一个函数,this在函数调用期间设置你给它的第一个参数(然后传递你给它的任何其他参数).

更新小提琴