如何優化我的加載JQuery功能？

Question

我有側邊欄，其中包含很多標題。 我不想為他們所有人寫一個函數。 這是一個代碼：

$("#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”。

我怎么能避免一個一個地寫？

Answer 1

使用url 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;
 });

Answer 2

下面的方法是可行的（與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;
});