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，然后从{{1}拉出来标识为data.html的div？

（我现在明白这并没有指明课程，但我只想说我有5个锚点，如

#ID

它肯定会使代码更容易维护。任何输入都是盛大的。

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参数传递，如上所述，但是你需要做的就取决于你究竟在打什么。

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

2 个答案: