jQuery syntax question (getting the ID of a link)

Question

I have a series of links, each with their own 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>

Instead of writing a series of statements like this:

$(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");
    });
});

Is there a way to abstract out the fact that when I click on a link with the class "ajax", I take its #ID, look at .data.html, and pull from data.html the div with the id #ID?

(I understand right now this doesn't specify the class, but let's just say I have 5 anchors like

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

It'd certainly make for code that was easier to maintain. Any input would be grand.

Answer 1

Yes, quite easily:

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

Answer 2

You could give each link a class like this:

<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>

but assuming all links in the list need this click handler, I would be inclined to instead use a more minimalist approach and give the list itself an 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>

and then

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

As for your call to "/data.html id" I'm not sure what "data.html" is exactly but generally you want to pass the ID as a GET or POST parameter as I've done above but what you need to do here depends on what exactly you're calling.