Hi Karl,
I was actually trying to build on a tutorial from your book- "Learning
jQuery 1.3". The example was from Chapter 6 (the appending HTML/ AHAH
technique). Your solution will more than likeley work... I was just
trying to figure out how to make some reuseable code for all of the
links.
Your book is pretty good by the way!
Thanks for your time,
Calvin
On Sat, Apr 11, 2009 at 4:39 PM, Karl Swedberg <k...@englishrules.com> wrote:
> 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;
> });
> });
>
>
