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()) 调用 { {1}}并将其返回值传递给bar。

您想要提供的内容foo是一个可以调用的函数。在您的情况下，最简单的方法是使用包装函数：

click

...并更新$('#one').click(function() { info(this, '#Aarea'); });以接受元素作为参数：

info

Updated Fiddle

或者，您可以使用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设置为你给它的第一个参数（然后传递你给它的任何其他参数）。

Updated Fiddle

Answer 2

我认为您的问题是您已将评估的功能传递给您的点击处理程序。

正确的格式是这样的：

$('#one').click(function(){ info('#Aarea'); })
$('#two').click(function(){ info('#Barea'); })

这里是工作代码的小提琴 - http://jsfiddle.net/2548hkvg/

或者，你也可以将目标区域定义为数据属性，并且只有一个函数，在这个小提琴中看到 - http://jsfiddle.net/k42ahykb/

在代码中，我们将信息定义为我们传递给点击处理程序的函数表达式，并且this被正确保留。

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

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

Answer 3

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

您在此处调用此函数，因此传递给.click()的结果为undefined。就像@iabw所说，你需要将它包装在一个函数表达式中，这样click事件就可以成功调用info()。

Answer 4

直接通过onclick函数传递给info。

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

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

4 个答案: