web-dev-qa-db-ja.com

jqueryで関数を実行する方法

私はプログラミング初心者です。関数を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);

});

これは、クリックしたときだけでなく、ページの読み込み時に関数を実行します。

これを正しく行うにはどうすればよいですか？

ありがとう！

jqueryfunction
63
Corin

以下はうまく動作するはずです。

$(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ハンドラー）。

108
Andrew Moore

私はこのようにします：

(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();
});
28
noboruwatanabe
function doosomething ()
{
  //Doo something
}


$(function () {


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

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

});
18
Vincent Ramdhanie

別の方法として（できれば）、次のようにすることもできます。

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

これを行うこともできます-1つの関数をどこでも使用したいので、JqueryObject.function（）を直接呼び出すことで使用できます。たとえば、独自の関数を作成して要素のCSSを操作する場合：

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

そしてそれを呼び出す方法：

$("#someRandomDiv").doSomething();
5
Joey Ezekiel

これは最も難読化されたソリューションですか？ jQueryのアイデアはこのようなコードを作成することではなかったと考えています。

doosomething()の外に$(function(){}を単純に移動すると、グローバルスコープが設定され、コードが単純/読みやすくなります。

2
Steve