jQuery 语法问题（获取链接的 ID）

Question

我有一系列链接，每个链接都有自己的 id：

<li><a id="about" href="#">About</a></li>
<li><a id="call-us" href="#">Contact us</a></li>
<li><a id="home" href="#">Head on home</a></li>

而不是像这样写一系列语句：

$(document).ready(function(){
    $("a.about").click(function(event){
        $("#content").load("/data.html #about");
    });
    $("a.call-us").click(function(event){
        $("#content").load("/data.html #call-us");
    });
});

有没有办法抽象出这样一个事实，即当我单击带有“ajax”类的链接时，我会使用它的#ID，查看.data.html，然后从data.html 拉出带有id 的div #ID?

（我现在明白这并没有指定类，但假设我有 5 个锚点，例如

<a href="#" class="ajax" id="UNIQUE-ID">Anchor Text</a>

它肯定会使代码更易于维护。任何输入都会很棒。

Answer 1

是的，很容易：

$(document).ready(function(){
    $("a.ajax").click(function(e){
        $("#content").load("/data.html #" + this.id);
        e.preventDefault();
    });
});

Answer 2

你可以给每个链接一个这样的类：

<li><a id="about" href="#" class="ajax">About</a></li>
<li><a id="call-us" href="#" class="ajax">Contact us</a></li>
<li><a id="home" href="#" class="ajax">Head on home</a></li>

但假设列表中的所有链接都需要这个点击处理程序，我会倾向于使用更简约的方法并给列表本身一个 ID：

<ul id="links">
  <li><a id="about" href="#">About</a></li>
  <li><a id="call-us" href="#">Contact us</a></li>
  <li><a id="home" href="#">Head on home</a></li>
</ul>

然后

$(function() {
  $("#links a").click(function() {
    $("#content").load("/data.html?id=" + this.id);
    return false;
  });
});

至于您对“/data.html id”的调用，我不确定“data.html”到底是什么，但通常您希望将 ID 作为 GET 或 POST 参数传递，就像我在上面所做的那样，但是什么你需要在这里做什么取决于你到底在打电话。