Thanks for offering to help out more Karl! I was able to get it to work!
Cheers,
Calvin
On Sat, Apr 11, 2009 at 5:16 PM, Karl Swedberg <k...@englishrules.com> wrote:
> Yeah, I thought that looked familiar. ;-) Glad you like the book. Let me
> know if you need any more help with that.
> --Karl
> ____________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
> On Apr 11, 2009, at 7:49 PM, Calvin Stephens wrote:
>
> 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;
>
> });
>
> });
>
>
>
>
