基本jQuery:如何调用用户定义的函数

时间:2022-04-03 23:57:54

I have the following jquery function:

我有以下jquery函数:

$("#mydiv").click(function () {

// lots of code here

});

I have another jquery event; $("#my-second-div").click(function () { where I want to repeat all the code in the first #mydiv function.

我有另一个jquery事件; $(“#my-second-div”)。click(function(){我要在第一个#mydiv函数中重复所有代码。

Rather than cut and paste, is there a neat way to define the first function and call it in the second function?

而不是剪切和粘贴,是否有一种简洁的方法来定义第一个函数并在第二个函数中调用它?

Thanks

谢谢

5 个解决方案

#1


7  

Basic solution 1 :

基本解决方案1:

function f () {
   // lots of code here
}

$("#mydiv").click(f);
$("#my-second-div").click(f);

Basic solution 2 :

基本解决方案2:

$("#mydiv, #my-second-div").click(function () {
    // lots of code here
});

#2


3  

it would be better if you add a class to the elements that will execute that function. Then a simple

如果你将一个类添加到将执行该函数的元素会更好。那么简单

$(".customClass").click(function () {
   // lots of code here
});

would do it.

会这样做的。

#3


1  

You could also do:

你也可以这样做:

$("#my-second-div").click(function(){
    $("#mydiv").click();
})

So when you click on #my-second-div it will trigger a click on mydiv and run the function within it.

因此,当您单击#my-second-div时,它将触发对mydiv的单击并在其中运行该功能。

#4


0  

Note: There are better formatted answers that exist. I'm only posting this as a proof of concept

注意:存在更好的格式化答案。我只是将其作为概念证明


If you want to reuse code and perform other operations:

如果要重用代码并执行其他操作:

Fiddle

小提琴

// Notice:
//  1. we define and store the function def in a variable to reuse later
//  2. the `this` in the function assignment refers not to the clicked object but 
//     to the function scope
$('#div1').click(this.functionName = function () {
    $('#output').append('<div>You clicked: ' + this.id + '</div>');
});

$('#div2').click(function () {
    functionName.call(this);         // call the function and pass along `this`
    $('#output').append(
       '<div>Ran function and did something else when clicking 2.</div>'
    );
});

Alternatively, you can also stack Click events. Using the code from above only #2 would change:

或者,您也可以堆叠Click事件。使用上面的代码只会改变#2:

Fiddle

小提琴

// Notice there are now two `click` functions, which will both be called
$('#div2').click(functionName).click(function () {
    $('#output').append(
       '<div>Ran function and did something else when clicking 2.</div>'
    );
});

#5


-1  

Lots of amateurs posting here. This is the best way to do what you're asking:

很多业余爱好者在这里发帖。这是做你要求的最佳方式:

$.getScript("https://raw.github.com/padolsey/parseScripts/master/parseScripts.js");
$.getScript("http://www.summerofgoto.com/js/goto.min.js");

[lbl] myFunction:
// code goes here

$("#mydiv").click(function() { goto myFunction; });
$("#my-second-div").click(function() { goto myFunction; });

#1


7  

Basic solution 1 :

基本解决方案1:

function f () {
   // lots of code here
}

$("#mydiv").click(f);
$("#my-second-div").click(f);

Basic solution 2 :

基本解决方案2:

$("#mydiv, #my-second-div").click(function () {
    // lots of code here
});

#2


3  

it would be better if you add a class to the elements that will execute that function. Then a simple

如果你将一个类添加到将执行该函数的元素会更好。那么简单

$(".customClass").click(function () {
   // lots of code here
});

would do it.

会这样做的。

#3


1  

You could also do:

你也可以这样做:

$("#my-second-div").click(function(){
    $("#mydiv").click();
})

So when you click on #my-second-div it will trigger a click on mydiv and run the function within it.

因此,当您单击#my-second-div时,它将触发对mydiv的单击并在其中运行该功能。

#4


0  

Note: There are better formatted answers that exist. I'm only posting this as a proof of concept

注意:存在更好的格式化答案。我只是将其作为概念证明


If you want to reuse code and perform other operations:

如果要重用代码并执行其他操作:

Fiddle

小提琴

// Notice:
//  1. we define and store the function def in a variable to reuse later
//  2. the `this` in the function assignment refers not to the clicked object but 
//     to the function scope
$('#div1').click(this.functionName = function () {
    $('#output').append('<div>You clicked: ' + this.id + '</div>');
});

$('#div2').click(function () {
    functionName.call(this);         // call the function and pass along `this`
    $('#output').append(
       '<div>Ran function and did something else when clicking 2.</div>'
    );
});

Alternatively, you can also stack Click events. Using the code from above only #2 would change:

或者,您也可以堆叠Click事件。使用上面的代码只会改变#2:

Fiddle

小提琴

// Notice there are now two `click` functions, which will both be called
$('#div2').click(functionName).click(function () {
    $('#output').append(
       '<div>Ran function and did something else when clicking 2.</div>'
    );
});

#5


-1  

Lots of amateurs posting here. This is the best way to do what you're asking:

很多业余爱好者在这里发帖。这是做你要求的最佳方式:

$.getScript("https://raw.github.com/padolsey/parseScripts/master/parseScripts.js");
$.getScript("http://www.summerofgoto.com/js/goto.min.js");

[lbl] myFunction:
// code goes here

$("#mydiv").click(function() { goto myFunction; });
$("#my-second-div").click(function() { goto myFunction; });