jQuery在后台加載頁面

Question

我的網站上有一些菜單選項卡。 當用戶單擊一個頁面時，它會展開或隱藏，但是當它單擊時，頁面將被加載（在后台）以保存他想要的方式（不刷新）。

我正在使用這個：

function ajaxLink(){
var age = $("#age").val();
$.get("<?php echo _SITE_ADDRESS; ?>/linktab/1",{"age":age},function(r){   });
}

這並不意味着要這樣做，但是它只適用於單個選項卡。 如果要添加更多選項卡，則必須添加更多選項卡並更改函數名稱，並且在a href必須添加onclick="ajaxLink()" 。

（age var沒有理由。我無法不破壞代碼而將其發布。）

我如何更改它以使其成為單個jQuery，所以當用戶單擊id = 1的選項卡時，其名稱為/linktab/1 ，id = 2的選項卡時，其名稱為/linktab/2 ，依此類推。

謝謝

Answer 1

如果我是您，那么我要采取的第一步是向要用於觸發此功能的所有元素（單擊的內容）添加一個類。 您可以從其中刪除onClick。 給他們所有類“ ajaxLink”或您喜歡的任何東西。 還給他們一個ID，即標簽的編號。 例如：

<div class="ajaxLink" id="2"></div>

$('.ajaxLink').click(function(event){
    ajaxLink(event.target.id);
});

function ajaxLink(id){
    var age = $("#age").val();
    $.get("<?php echo _SITE_ADDRESS; ?>/linktab/"+id,
        {"age":age},function(r){   });
}

據我對您的問題的理解，如果您以前的代碼有效，那么也應該如此。 如果沒有，請告訴我您遇到了什么錯誤。

Answer 2

如果使用的是jquery，則應使用它來綁定事件。 讓我們假設這個html：

<ul>
  <li class=tab><a href="<?php echo _SITE_ADDRESS; ?>/linktab/1">tab 1</a>
  <li class=tab><a href="<?php echo _SITE_ADDRESS; ?>/linktab/2">tab 2</a>
</ul>

您可以使用以下方式將ajaxLink綁定到兩者

$('.tab a').on('click', function(event){ // Using an anonymous function instead of ajaxLink
  event.preventDefault(); // Cause you don't want to activate the link

  var age = $("#age").val();

  // "this" refers to the A element

  var url = this.href;
  $.get(url,{"age":age},function(r){ /* your callback */  });

});

Answer 3

可以自己解決這個問題。

function ajaxLink(id){
var id = event.target.id;
$.get("<?php echo _SITE_ADDRESS; ?>/linktab/"+id);
}

在每個“ hreaf”中，我使用onclick =“ ajaxLink（）” id =“ 1來更改每個菜單標簽的ID。

謝謝