Optimisation du code basique en jQuery

Bonjour je débute en jQuery et il y a un concept que je n'ai pas encore bien compris

j'ai du mal a formuler la question alors comment faire si par exemple si je veux faire un menu de 50 boutons et ou
chaque bouton afficherait un cadre avec 'bonjour je suis le bouton numero xx'

sans devoir ecrire tout ceci...

$('#bouton1').click(function(){
window.alert('bonjour, je suis le bouton 1');
}
)
$('#bouton2').click(function(){
window.alert('bonjour, je suis le bouton 2');
}
)
$('#bouton3').click(function(){
window.alert('bonjour, je suis le bouton 3');
}
)
...
$('#bouton50').click(function(){
window.alert('bonjour, je suis le bouton 50');
}
)







Comme j'ai déja fait un peu d'autres langages de programmation j'avais pensé a un truc du genre
, en partant du principe que la classe bouton existe et que j'ai mis un attribut data-id à chaque bouton

$('.bouton').click(function(){
var temp=this.attr("data-id");
window.alert(temp);
})

mais apparemment le this pose probleme.

Merci de votre aide !
Modifié par boule-de-berlin (30 May 2015 - 15:44)

jQuery est une simple bibliotheque écrite en JavaScript. Il te faut des bases en JavaScript pour l'utiliser. Ce que tu demandes se fait avec une simple boucle de type "for".

Cherches un cours ou un livre pour apprendre JavaScript sinon tu ne vas jamais t'en sortir.

bonjour et merci de la réponse, je connais aussi le javascript de base, les boucles je connais, et pourtant je ne vois pas comment résoudre mon probleme

un petit up

Bonjour,

jquery accepte que tu définisses un sélecteur de la manière suivante :

$('#bouton' + nomVariable)

pas besoin de te faire un dessin pour l'utilisation que tu peux en faire avec une boucle for

sinon, pour faire référence à l'objet jquery sur lequel on a cliqué (ton second bout de code que tu proposes), tu y étais presque, il faut utiliser $(this) au lieu de this
Modifié par sanchodellavega (30 May 2015 - 20:52)

Salut,

Pas besoin de boucle pour ce cas.

Ton code est presque bon tu peux simplement suivre l'aide de sanchodellavega (l'elem cliqué est disponible avec $(this)) :

$('.bouton').click(function(){
  var temp=$(this).data('id');
  window.alert(temp);
});

Petite modif : tous les attributs data-* dans tes balises sont disponibles avec la méthode .data() de jQuery.

PS : un up un peu plus d'1 heure après ton message c'est un peu gonflé...
Modifié par MatthieuR (30 May 2015 - 21:56)

un très grand merci pour ces réponses MatthieuR et Sancho !

a écrit :
PS : un up un peu plus d'1 heure après ton message c'est un peu gonflé...

autant pour moi
Modifié par boule-de-berlin (30 May 2015 - 22:38)