如何在jquery中运行一个函数答案

【问题标题】：How to run a function in jquery如何在jquery中运行一个函数
【发布时间】：2010-11-14 13:52:36
【问题描述】：

我是一个编程新手，我不知道如何在 JQuery 中存储一个函数并在多个地方运行。

我有：

$(function () {
  $("div.class").click(function(){
    //Doo something

  });

  $("div.secondclass").click(function(){
    //Doo something
  });

});

现在这2个“//Doo somethings”是一样的，我不想再写同样的代码了。

如果我说：

$(function () {

  function doosomething ()
  {
    //Doo something
  }

  $("div.class").click(doosomething);

  $("div.secondclass").click(doosomething);

});

这将在页面加载时运行该功能，而不是仅在点击时运行。

我该如何正确地做到这一点？

谢谢！

【问题讨论】：

标签： jquery function

【解决方案1】：

以下应该可以很好地工作。

$(function() {

  // Way 1
  function doosomething()
  {
    //Doo something
  }

  // Way 2, equivalent to Way 1
  var doosomething = function() {
    // Doo something
  }

  $("div.class").click(doosomething);

  $("div.secondclass").click(doosomething);

});

基本上，您在使用它的同一范围内声明您的函数（JavaScript 使用Closures 来确定范围）。

现在，由于 JavaScript 中的函数的行为与任何其他对象一样，您可以使用 .click(doosomething); 简单地将 doosomething 指定为在点击时调用的函数

在您使用doosomething()（没有() 的doosomething 指的是该函数但不调用它）或另一个函数调用（在这种情况下，click处理程序）。

【讨论】：

谢谢你的方法2，我得试试。但是该函数确实是在页面加载时运行的，因为在 jquery 中 $(function() 是文档加载的简写。所以至少方法 1 不起作用。
我对jQuery很陌生，所以你能解释一下第一行$(function() {吗？请问这条线的目的是什么？ tyvm
$ 是 'jQuery' 的简写。所以每次你在某个地方看到'$'，你必须认为这是jQuery函数，$(function(){});将使其不指定特定事件：代码将在文档准备好时执行。 $(函数(){}); === jQuery(文档).ready(函数(){});或 $(document).ready(function(){});

【解决方案2】：

我会这样做：

(function($) {
jQuery.fn.doSomething = function() {
   return this.each(function() {
      var $this = $(this);

      $this.click(function(event) {
         event.preventDefault();
         // Your function goes here
      });
   });
};
})(jQuery);

然后在准备好文档后，您可以执行以下操作：

$(document).ready(function() {
   $('#div1').doSomething();
   $('#div2').doSomething();
});

【讨论】：

在“文档就绪”之外创建一个函数真的有什么好处吗？
@Nuktu 是的，用于插件开发。
如果你在函数参数中使用了$，那么为什么还要调用jQuery而不是再次使用$呢？
它通过 jQuery，因此即使您有其他分配给 $ 的库，此版本也可以工作。形参及其在函数内的使用具有局部作用域，因此不会像传递的对象名称那样冲突。
为什么你的括号里有 $ 而不是之前

【解决方案3】：

function doosomething ()
{
  //Doo something
}


$(function () {


  $("div.class").click(doosomething);

  $("div.secondclass").click(doosomething);

});

【讨论】：

【解决方案4】：

或者（我会说最好），你可以这样做：

$(function () {
  $("div.class, div.secondclass").click(function(){
    //Doo something
  });
});

【讨论】：

当 f.e div.secondclass 尚不存在时很好......不！

【解决方案5】：

您也可以这样做 - 因为您希望在任何地方都使用一个函数，您可以通过直接调用 JqueryObject.function() 来实现。例如，如果您想创建自己的函数来操作元素上的任何 CSS：

jQuery.fn.doSomething = function () {
   this.css("position","absolute");
   return this;
}

以及如何称呼它：

$("#someRandomDiv").doSomething();

【讨论】：

【解决方案6】：

这是最容易混淆的解决方案吗？我不相信 jQuery 的想法是创建这样的代码。还有我们不想冒泡事件的假设，这可能是错误的。

将doosomething() 简单地移动到$(function(){} 之外会使其具有全局范围并保持代码简单/可读。

【讨论】：

但是如果只用在JQuery函数中，最好不要污染全局作用域，保留在它所属的地方。

【解决方案7】：

我在现代 JavaScript 中的简单方法：

$(
  $("div.class").click(() => {doosomething});
  $("div.secondclass").click(() => {doosomething});
);

【讨论】：