Une fonction Jquery pour plusieurs "input"

Bonjour,
Je suis nouvelle sur le forum et je suis débutante en jquery et Ajax (infographiste en formation webdesigner)
J'ai une page avec 4 input [type="button"] et je devais faire apparaitre un texte ".txt" dans une div
(chaque bouton charge une page différente)
Tout fonctionne avec le code ci-dessous, mais on me demande de faire "une fonction pour tous les boutons..."
et je n'y arrive pas !
Remerciements sincères pour votre aide. Je galère depuis 3 bonnes heures et je ne trouve rien sur le forum. (Je suis une quiche et une débutante !!!)
Voilà mon code:

<script src="libs/jquery/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#button1").click(function () {
                    $.ajax({
                        url: "page1.txt",
                        success: function (data) {
                            $("#recup").html(data);
                        },
                        error: function (e) {
                            alert("Pbm au chargement de page1.txt");
                        }
                    });
                });
                $("#button2").click(function () {
                    $.ajax({
                        url: "page2.txt",
                        success: function (result) {
                            $("#recup").html(result);
                        }
                    });
                });
                $("#button3").click(function () {
                    $.ajax({
                        url: "page3.txt",
                        success: function (result) {
                            $("#recup").html(result);
                        }
                    });
                });
                $("#button4").click(function () {
                    $.ajax({
                        url: "page4.txt",
                        success: function (result) {
                            $("#recup").html(result);
                        }
                    });
                });
            });
        </script> 

Merci

Salut voici un exemple simple.

HTML :

<button id="alert1" class="alert-btn">ALERT 1</button>
<button id="alert2" class="alert-btn">ALERT 2</button>
<button id="alert3" class="alert-btn">ALERT 3</button>

SCRIPT :

 $(document).ready
(
   function () 
   {
        $(".alert-btn").bind
        (
            "click",
            function()
            {
                 var current_id=$(this).attr("id");

                 switch(current_id)
                 {
                     case "alert1" :
                                             alert("1");
                                             break;
                     case "alert2" :
                                             alert("2");
                                             break;
                     case "alert3" :
                                             alert("3");
                                             break;
                 }
            }
        );
   }
);

Méthode assez simple tu places un event sur la classe et ensuite tu prend l'attribut "ID" pour faire un switch et lancer la fonction que tu veux.

Bonjour,

Il vous faut trouver une solution afin que ce soit le html qui configure le fichier appelé. Les bouttons pourraient tous avoir un id "ajax", ou bien mieux encore (car beaucoup plus souple) un attribut data-* qui permette à votre fonction de comprendre qu'elle doit se lancer, un deuxième attribut data-* renseignerait sur le fichier à appeler. Ainsi, un ou plusieurs éléments html présents sur la page serait en mesure d'appeler non seulement des fichiers différents, mais aussi le même fichier (ce qui n'aurait pas été possible avec un ID).

Un exemple que j'ai créé dernièrement. Les fichiers sont appelés via une fenêtre Ajax dédiée à l'endroit désiré dans la page, ou à défaut dans une fenêtre Ajax globale (exemple en ligne) :

// @documentation :
// - L'attribut 'data-display' détermine la prise en charge du contenu Ajax par le script
//      @param 'global' : ouverture du contenu Ajax dans une fenêtre globale [1]
//      @param 'popin' : ouverture dans une popin [2]
//      @param '***' : ouverture dans une fenêtre dédiée [3]
// - L'attribut 'data-url' de l'élément ajax doit correspondre au nom du fichier placé dans le dossier 'ajax'. Le script récupère le fichier et l'affiche dans une fenêtre '.ajax-window-*'.

jQuery(document).on('click', '[data-display][data-path]', function() {
	obj = $(this);
	type = obj.data('display');
	path = obj.data('path');
	if (type === 'global') { // [1]
		$('.ajax-window').remove(); // Si déjà une fenêtre créée précédement
		$('<div class="wrap"><div class="ajax-window"></div></div>').appendTo('main'); // Création d'une fenêtre Ajax
		$('.ajax-window').load(path + '.php');
//	} else if (type === 'popin') { // [2]
//		$('body').css('overflow', 'hidden'); // Pas de scroll sur la page si popin ouverte
//		$('<div class="ajax-window-popin"/>').appendTo('body'); // Création d'une fenêtre Ajax
//		$('.ajax-window-popin').load(path + '.php', function() {
//			$(this)
//				.append('<a href="" id="cmd-popin"/>')
//				.wrapInner('<section id="popin" class="popin"/>');
//		});
	} else { // [3]
		$('.ajax-window-' + type).load(path + '.php');
	}
});

EDIT : j'ai commenté le script dédié à la popin afin de clarifier le code, ce qui répondra plus précisément à votre question.
Modifié par Olivier C (11 Jan 2016 - 17:18)

Merci pour vos réponses.
Je ne comprends pas tout et pour aujourd'hui je crois que j'ai mon compte, mon cerveau va éclaté !!!
j'ai envoyer une réponse à shaan1974 sans le vouloir elle est partie. (Je suis nouvelle sur le forum
et je deviens une quiche partout après une journée à chercher).
Excusez-moi.
Mon html (ci-dessous) est un menu, et c'est ça qui me perturbe. Après une bonne nuit ça ira mieux.

        <nav id="menu">
                    <ul>
                        <li><a href="page1.txt">menu page 1</a></li>
                        <li><a href="page2.txt">menu page 2</a></li>
                        <li><a href="page3.txt">menu page 3</a></li>
                        <li><a href="page4.txt">menu page 4</a></li>
                    </ul>
         </nav>

Encore merci, je regarderais demain.
Olivier C, c'est chouette ton exemple en ligne, c'est exactement ce que je dois faire (en moins beau !)
Merci et bonne fin de journée et bonne soirée.

Bonjour,

Tu peux reprendre l'idée d'utiliser les data-* selon le modèle de Olivier.

Sinon, si l'on reprend ton html, et ton javascript, tu pourrais simplement faire :

$("#menu a").click(function (e) {
  e.preventDefault()
  var url = $(this).attr('href');
  $.ajax({
    url: url,
    success: function (data) {
      $("#recup").html(data);
    },
    error: function (e) {
      alert("Pbm au chargement de "+url);
    }
  })
})

Merci j'ai compris ! Youpi !
Je n'était vraiment plus très en phase hier après-midi, je n'ai pas joint le Html qui correspondait à ma fonction !
Mais grâce à vos réponses et particulièrement à la réponse de Solid Snack, j'ai modifié la fonction suivant le bon Html et tout fonctionne. J'ai bien la page1.txt quand je click sur le bouton 1, la page2 avec le bouton 2 ...
Merci à tous - Ci-dessous les deux codes. Merci encore pour votre aide.

<footer id="footer">
                <input type="button" data-file="page1.txt" id="button1" value="Bouton page 1" />
                <input type="button" data-file="page2.txt" id="button2" value="Bouton page 2" />
                <input type="button" data-file="page3.txt" id="button3" value="Bouton page 3" />
                <input type="button" data-file="page4.txt" id="button4" value="Bouton page 4" />
</footer>

$(document).ready(function () {
                $('input[type="button"]').click(function () {
                    var url = $(this).data('file');
                    $.ajax({
                        url: url,
                        success: function (data) {
                            $("#recup").html(data);
                        },
                        error: function (e) {
                            alert("Pbm au chargement de " + url);
                        }
                    })
                })
            });

Pense à passer le topic en [résolu]