On a page which offers the viewer a choice of colours for various elements, I have this structure for changing the background: 

Two functions are invoked:

showBg() 

changes the gradient on the html tag;

showLink() 

 shows a link to loading a new page about the chosen colour: this is where there’s a problem.

function showLink(child) {

$('.abt').fadeOut(400);

$('#bgswatch a:nth-child(' + child + ')' ).delay(1200).fadeIn(1200);

}

The function works fine—but the child numbering is crazy.

When I count down the children of #bgswatch”, I get to ’13’ as the correct child number for the corresponding link, "about blue".

But what works is ’17’  And it’s similar for the other five links. What am I missing?

view online  > choose "ask"  > choose " colour"  >  choose "background".

Code below ( no comments right now about using “onclick”, ok?  ):

<p id="bgswatch">

<a href="#" onclick="showBg('gradblu'); showLink('17');"><img src="img/swatch/blu.gif" /></a>

<a href="#" onclick="showBg('graddun'); showLink('18');"><img src="img/swatch/dun.gif" /></a>

<a href="#" onclick="showBg('gradblk'); showLink('19');" ><img src="img/swatch/blk.gif" /></a>

<a href="#" onclick="showBg('gradwhi'); showLink('20');"><img src="img/swatch/whi.gif" /></a>

<a href="#" onclick="showBg('gradred'); showLink('21');"><img src="img/swatch/red.gif" /></a>

<a href="#" onclick="showBg('gradgrn'); showLink('22');"><img src="img/swatch/grn.gif" /></a>

<!— 

the next series of links are relevant to the problem because they’re children of “#bgswatch”;  

opBg() changes the opacity on a grey background, effectively changing the density of the gradient on the html tag.

—>

<a class="faux" style="position:relative; left:-42px;">background:</a></br></br>

<a href="#" onclick="opBg(8);”>a hint</a>

<a href="#" onclick="opBg(6);”>low</a>

<a href="#" onclick="opBg(4);”>medium</a>

<a href="#" onclick="opBg(2);”>high</a>

<a href="#" onclick="opBg(0);”>max</a></br></br>

<!— 

this series of links  are displayed by showLink(); they allow the user to load a page with information about the colour chosen; none is active. 

—>

<a href="#" class="abt nun" onclick="loadIt('abtblue');">about blue</a>

<a href="#" class="abt nun" onclick="loadIt('abtyellow');">about yellow</a>

<a href="#" class="abt nun" onclick="loadIt('abtblack');">about black</a>

<a href="#" class="abt nun" onclick="loadIt('abtwhite');">about white</a>

<a href="#" class="abt nun" onclick="loadIt('abtred');">about red</a>

<a href="#" class="abt nun" onclick="loadIt('abtgreen');">about green</a>

</p>