web-dev-qa-db-fra.com

Comment exécuter une fonction dans jQuery

Je suis un débutant en programmation et je ne sais pas comment enregistrer une fonction dans JQuery et l'exécuter à plusieurs endroits.

J'ai:

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

  });

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

});

Maintenant les 2 "// Doo somethings" sont les mêmes, et je ne veux plus écrire le même code.

Si je mets:

$(function () {

  function doosomething ()
  {
    //Doo something
  }

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

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

});

Cela exécuterait la fonction au chargement de la page, plutôt que seulement quand il clique.

Comment puis-je le faire correctement?

Merci!

jqueryfunction
63
Corin

Ce qui suit devrait bien fonctionner.

$(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);

});

Fondamentalement, vous déclarez votre fonction dans la même portée que vous l'utilisez (JavaScript utilise Closures pour déterminer la portée).

Maintenant, puisque les fonctions en JavaScript se comportent comme n'importe quel autre objet, vous pouvez simplement assigner doosomething comme fonction à appeler sur un clic en utilisant .click(doosomething);

Votre fonction ne sera exécutée que si vous l’appelez avec doosomething() (doosomething sans le () Se réfère à la fonction mais ne l’appelle pas) ou une autre fonction appelle in (in dans ce cas, le gestionnaire click).

108
Andrew Moore

Je le ferais de cette façon:

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

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

Ensuite, sur le document prêt, vous pouvez faire des choses comme ceci:

$(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

Alternativement (je dirais de préférence), vous pouvez le faire comme ceci:

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

Vous pouvez également le faire. Comme vous souhaitez utiliser une fonction partout, vous pouvez le faire en appelant directement JqueryObject.function (). Par exemple, si vous voulez créer votre propre fonction pour manipuler n'importe quel CSS sur un élément:

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

Et la façon de l'appeler:

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

Est-ce la solution la plus obscure possible? Je ne crois pas que l'idée de jQuery était de créer un code comme celui-ci. Il existe également la présomption que nous ne voulons pas masquer les événements, ce qui est probablement faux.

Un simple déplacement doosomething() en dehors de $(function(){} lui donnera une portée globale et maintiendra le code simple/lisible.

2
Steve