如何优化我的加载JQuery函数


How to optimize my loading JQuery function?

我有一个包含很多标题的边栏。我不想把它们都写成一个函数。下面是一个代码:

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

侧边栏的id总是看起来像"#menu_xyz",加载php使用相同的"xyz_doc.php"。

怎样才能避免一个一个写?!

为url使用一个类和一个data属性html:

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

<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;
 });

下面将工作(与madalin的相同,除了我只是使用data属性本身来定位元素,而不是添加另一个类):

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;
});