jquery - passage de paramètres à des fonctions

Cela semble être une question simple, mais je ne peux pas trouver une réponse simple. Donc je vais commencer par donner un exemple simple.

<a href="#" onclick="showmsg('bark')">dog</a>
<a href="#" onclick="showmsg('meow')">cat</a>

Et voici une fonction javascript...

function showmsg(msg) {
  alert(msg);
}

Dans l'exemple ci-dessus, du contenu supplémentaire (lignes de html) peut être ajouté sans casser le comportement (le javascript). Chaque ligne de code html passe son propre paramètre pour le javascript pour lui dire ce qu'message qu'il doit afficher.

Si le code html est changé...

<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>

Alors comment puis-je écrire une fonction jquery qui sait quelle ligne de code html a été cliqué? En d'autres mots...

Comment puis-je passer d'un paramètre à une fonction jquery?

Hey Audi, bienvenue. J'ai vu votre question sur mon téléphone, et par le temps, j'ai eu à travailler pour essayer de répondre, il avait une mine de bonnes réponses déjà. Votre question a été édité maintenant, mais à l'origine, ne contiennent pas de préformaté code. Je voulais m'assurer que vous saviez que vous pouvez poster le code en utilisant le bouton dans l'éditeur qui ressemble à un et de zéro. Qui permettra de contourner les limitations sur les liens ou la nouveauté de votre adhésion. De toute façon. Sympa de vous voir ici, et bonne chance!

OriginalL'auteur Audi | 2010-11-11

javascript jquery

12

Dans ce cas, je préfère utiliser un - l'attribut, comme ceci:
```
<a href="#" class="showmsg" data-sound="bark">dog</a>
<a href="#" class="showmsg" data-sound="meow">cat</a>
```
Et votre click gestionnaire peut aller la chercher, comme ceci:
```
$("a.showmsg").click(function() {
  alert($(this).attr("data-sound"));
});
```
Ou en jQuery 1.4.3+
```
$("a.showmsg").click(function() {
  alert($(this).data("sound"));
});
```
Vous pouvez le tester ici.

À préciser sur la base des observations: Ce qui est parfaitement valide en HTML5, en HTML4, il n'est pas valide, mais le validateur est la seule question que vous aurez, il va travailler dans tous les HTML4 navigateur. Si ce n'était pas le manque dans HTML4, il n'aurait pas été ajouté en HTML5...je l'avais personnellement l'utiliser s'il valide ou non.

mais ce n'est pas valide html.
Non, il n'est pas. Il fait partie de la spécification HTML5: dev.w3.org/html5/spec/... (et ne cause pas de problèmes dans le HTML4, sur n'importe quel navigateur).
assez juste, mais c'est un HTML 5 de la solution, car cela permet de produire un code HTML non valide 4 document.
Vous êtes à la en supposant que la question est limitée à HTML4....pourquoi? Compte tenu de votre downvote, s'il vous plaît dites-moi ce qui est incorrect sur la réponse.
J'ai édité pour préciser que pour soulager la confusion - mais je pense que l'utilisation de HTML5 est beaucoup plus répandu que ce que vous pensez, surtout pour les nouvelles le développement, qui est la juste part de questions.

OriginalL'auteur Nick Craver
3

Ce que vous pouvez faire est de définir un attribut personnalisé qui contient la valeur qui doit être transmis à la fonction. Quelque chose comme
```
<a href="#" class="showmsg" data-attr="bark">dog</a><br>
<a href="#" class="showmsg" data-attr="meow">cat</a><br>

$("a.showmsg").click(function(){
    var attr = $(this).attr("data-attr");
    return false;
});
```
vous devez spécifier que c'est de l'html 5 de la solution. il va produire un code html non valide 4 document.

OriginalL'auteur rahul
3

Les données de la méthode est une bonne façon d'aller. Si c'était moi, cependant, je préfère ne pas avoir de HTML4 les erreurs de validation par la définition de sons dans un objet de la carte, puis passer le texte à la carte. Par exemple:
```
<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>
```
```
var sounds = {
    dog: "woof",
    cat: "meow",
    horse: "neigh",
    etc: "etc"
};
$("a.showmsg").click(function() {
    alert(sounds[$(this).text()] || "");
});
```
exemple: http://jsfiddle.net/AndyE/Q9yWU/

OriginalL'auteur Andy E
1

Tout d'abord pour vous permettre de montrer le code de placer le code dans votre message, sélectionnez-le et appuyez sur ctrl+k pour mettre dans le bloc de code.

Retour à la question en jquery que vous utilisez:
```
$("a.showmsg").click(function() {
    alert($(this).text());
});
```
Vous pouvez utiliser "ce" pour savoir ce qui a été cliqué

Ce serait montrer "dog", pas "bark".
Nick, je suis conscient de cela, mais dans sa question le changement de HTML n'a aucun moyen de passer la variable qui contient le son. Donc, je viens de texte affiché à la place pour une démo
Dans ce cas, je ne vois pas comment il peut être utilisé, car il nécessite le texte de match de l'alerte...

OriginalL'auteur Brady
1

Si j'ai bien compris votre question correct, vous pouvez le faire comme ceci:
```
<a href="#" class="showmsg" alt="bark">dog</a>
<a href="#" class="showmsg" alt="meow">cat</a>

$(".showmsg").click(function(){
     var msg = $(this).attr("alt");
     alert(msg);
});
```
Si le message faut avoir de l'espace de l'id ne peut pas être un bon choix. Nous pouvons choisir un attribut comme Alt ou quelque chose d'autre.
oui, c'était juste un exemple

OriginalL'auteur Michel

si vous voulez vraiment utiliser ce code HTML:

<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>

Il suffit d'écrire ceci:

//for dog
$('.showmsg:first-child').click(function() {
  //some crazy code here ..
  return false; //for prevent open href link
});

//for cat
$('.showmsg:last-child').click(function() {
  //some crazy code here ..
  return false; //for prevent open href link
});

$(".showmsg:contains('dog')").click(function() {
  //some crazy code here ..
  return false; //for prevent open href link
});

$(".showmsg:contains('cat')").click(function() {
  //some crazy code here ..
  return false; //for prevent open href link
});

et aussi

$("a:contains('dog')").click(function() {
  //some crazy code here ..
  return false; //for prevent open href link
});

$("a:contains('cat')").click(function() {
  //some crazy code here ..
  return false; //for prevent open href link
});

OriginalL'auteur DANDYYeah

0

Avec la fonction (ou la fonction de clic de départ à jQuery 1.4.3), vous pouvez transférer les données de l'événement dans un moyen très agréable:
```
<button id="clickable0">Clickable 0</button>
<button id="clickable1">Clickable 1</button>

<script type="text/javascript">
  for(var i = 0; i < 2; i++)
  {
     $("#clickable"+i).on('click', {item: i}, function(event){
                        alert("clicked on item "+ event.data.item);
                    });
  }
</script>
```
Le principal avantage est que la valeur de l'événement.les données.élément sera le même que le paramètre ("je" dans ce cas) était à l'époque le onClick a été créé. C'est pratique, parce que dans ce cas, vous n'aurez pas à vous soucier de la valeur de i modification tandis que la boucle est en cours d'exécution.

OriginalL'auteur Cristan

Vous devez vous connecter pour publier un commentaire.