Hi Calvin,
One way you can simplify things is to give each of those containers
(#letters-a, #letters-b, etc.) the same class -- for example, "letters".
Bind a click handler to all links within element that have
class="letters"
Then, inside the click handler, you're going to load a file based on
the last character of the container's id. To do so, first store that
letter in a variable:
1. traverse up through the parent nodes until you find the element
with the "letters" class
2. grab its id. (for example "letters-a")
3. slice the last letter of that id (e.g. "a")
When you use the load method, concatenate the variable and ".html"
This is what it might look like:
$(document).ready(function() {
$('.letters a').click(function() {
var letter = $(this).parents('.letters')[0].id.slice(-1);
$('#dictionary').load(letter + '.html');
return false;
});
});
Hope that helps.
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 11, 2009, at 5:46 PM, Calvin wrote:
I have a simple index page with 3 links(with separate ids) and a empty
<div></div> tag(with an id). I am able to get content to load into the
empty div tags but I am also repeating jquery code to do so. I have
limited experience creating variables and switch/case statements and
I'm thinking that's the best way to go but can't get the code to work.
Here is the code I have so far:
$(document).ready(function() {
$('#letter-a a').click(function(){
$('#dictionary').load('a.html');
return false;
});
});
$(document).ready(function() {
$('#letter-b a').click(function(){
$('#dictionary').load('b.html');
return false;
});
});
$(document).ready(function() {
$('#letter-c a').click(function(){
$('#dictionary').load('c.html');
return false;
});
});
