Comment optimiser ma fonction de chargement JQuery ?

Question

J'ai une barre latérale qui contient beaucoup de titres. Je ne veux pas écrire une fonction pour chacun d'entre eux. Voici un code pour un titre :

$("#menu_documentations").click(function () {
$("#sites").load("documentations/documentations_doc.php");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
 });

L'identifiant de la barre latérale ressemble toujours à "#menu_xyz" et le chargement php utilise le même "xyz_doc.php".

Comment puis-je éviter d'écrire un par un ? !

Answer 1

Utiliser une classe et un attribut de données pour l'url html :

<a class="load-ajax" href="#" data-url="coustom-page-name.html">Link</a>

o

<a class="load-ajax" href="coustom-page-name.html">Link</a>

js :

$(".load-ajax").click(function () {
var url = $(this).attr('data-url');//$(this).attr('href');
$("#sites").load(url);
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
 });

Answer 2

La solution ci-dessous fonctionnerait (comme celle de Madalin, sauf que j'utiliserais l'attribut data lui-même pour cibler les éléments plutôt que d'ajouter une autre classe) :

HTML :

 <button data-get-page="documentations/documentations_doc.php">click me </button>

JS:

$(document).on('click','[data-get-page]',function() {
  var $this=$(this);
  var url=$this.data('get-page');
  $("#sites").load(url);
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  return false;
});