在jQuery中将选择器作为函数参数传递[重复]

This question already has an answer here:

这个问题在这里已有答案：

• Calling an event handler with an argument [duplicate] 5 answers
• 使用参数调用事件处理程序[duplicate] 5个答案

Fiddle Example

小提琴示例

Can I pass selectors other than $(this) selector as function parameters?

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

What I mean is that the selectors (#Aarea and Barea) I want to pass are the ones that I want to append some HTML content to.

我的意思是我要传递的选择器（#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>

But it doesn't work unless I don't use the parameters and specify those selectors in the function.

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

4 个解决方案

#1

What your code:

你的代码是什么：

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

...is doing is calling info and passing its return value into click, exactly like foo(bar()) calls bar and passes its return value into foo.

...正在调用info并将其返回值传递给click，就像foo（bar（））调用bar并将其返回值传递给foo一样。

What you want to give click is a function to call. In your case, the simplest way is to use a wrapper function:

你想要点击的是一个要调用的函数。在您的情况下，最简单的方法是使用包装函数：

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

...and update info to accept the element as an argument:

...并更新信息以接受元素作为参数：

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

Updated Fiddle

更新小提琴

Alternately, you can use Function#call to call your original info without changing it:

或者，您可以使用Function＃call调用原始信息而不更改它：

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

Function#call calls a function, setting this during the function call to the first argument you give it (and then passing along any other arguments you give to it).

Function＃调用一个函数，在函数调用期间将它设置为你给它的第一个参数（然后传递你给它的任何其他参数）。

Updated Fiddle

更新小提琴

#2

I think your problem is that you're passing the evaluated function into your click handler.

我认为你的问题是你将评估的函数传递给你的点击处理程序。

The proper format is something more like this:

正确的格式是这样的：

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

Here's a fiddle with working code -http://jsfiddle.net/2548hkvg/

这是一个工作代码的小提琴--http：//jsfiddle.net/2548hkvg/

Alternatively, you could define the target area as a data attribute as well, and only have one function, seen in this fiddle - http://jsfiddle.net/k42ahykb/

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

In the code for that, we're defining info as our function expression that we pass to the click handler, and this is properly retained.

在代码中，我们将info定义为我们传递给click处理程序的函数表达式，并且这是正确保留的。

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)

#3

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

You are calling the function here, so the result passed to .click() is undefined. Like @iabw said, you need to wrap it in a function expression so the click event can invoke info() successfully.

你在这里调用函数，所以传递给.click（）的结果是未定义的。就像@iabw所说，你需要将它包装在函数表达式中，以便click事件可以成功调用info（）。

#4

Just passthrough this from onclick function to info.

只需通过onclick函数传递给info。

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