Question

I am using jquery so that when the user clicks a link I get the id of said link then use it to select a li item with the same id and animate it. Well, at least that’s what I’m trying to do…so far I have:

$(function(){         $('#slider-buttons a').click(function(){         var x = $(this).attr('id');         var y = $('#slider-stage-list li' + x);          if(x == 'inicio')             $(this).animate({ 'left' : '0px'},700);         else             $(this).animate({ 'left' : (increment*3) + 'px'},700);     }); }); 

I’ve tried various combinations but I still can’t get ‘y’ to have the value of the list item with the same id as x (the clicked url)…x does gets the correct id but y still returns ‘undefined’ at best…here’s the html code that goes along…

<div id='slider-buttons'>     <a href='#' id='inicio'>Inicio</a> <br />     <a href='#' id='previous'>&iquest;Qui&eacute;nes Somos?</a> <br />      <a href='#' id='clases'>Clases</a> <br />     <a href='#' id='equipo'>Equipo</a> <br />     <a href='#' id='album'>&Aacute;lbum</a> <br />     <a href='#' id='especiales'>Eventos Especiales</a> <br />     <a href='#' id='#'>Cont&aacute;ctanos</a> <br /> </div> <div id='stage'>     <ul id='slider-stage-list'>         <li id='inicio'>Inicio</li>         <li id='nos'>&iquest;Qui&eacute;nes Somos?</li>         <li id='clases'>Clases</li>         <li id='equipo'>Equipo</li>         <li id='album'>&Aacute;lbum</li>         <li id='especiales'>Eventos Especiales</li>         <li id='#'>Cont&aacute;ctanos</li>     </ul> </div> 

any help will be appreciated =)

---

Edit to answer the 3 responses

If I do any of those I get in console.log(); ‘[object Object]’ =/

---

Edit answering BC

Thanks for the HTML correction, still if I write down the code you gave me for jquery I still get in console.log(); ‘[object Object]’

---

Edit ’cause I didn’t got the last response

If I try that approach I either get ‘[object Object]’ or nothing…

Answer 1

No, no

This is invalid html because your links are sharing the same id’s as your list items.

Your code should look more like this:

<div id='slider-buttons'>     <a href='#' id='inicio'>Inicio</a> <br />     <a href='#' id='previous'>&iquest;Qui&eacute;nes Somos?</a> <br />      <a href='#' id='clases'>Clases</a> <br />     <a href='#' id='equipo'>Equipo</a> <br />     <a href='#' id='album'>&Aacute;lbum</a> <br />     <a href='#' id='especiales'>Eventos Especiales</a> <br />     <a href='#' id='contactanos'>Cont&aacute;ctanos</a> <br /> </div> <div id='stage'>     <ul id='slider-stage-list'>         <li id='item_inicio'>Inicio</li>         <li id='item_previous'>&iquest;Qui&eacute;nes Somos?</li>         <li id='item_clases'>Clases</li>         <li id='item_equipo'>Equipo</li>         <li id='item_album'>&Aacute;lbum</li>         <li id='item_especiales'>Eventos Especiales</li>         <li id='item_contactanos'>Cont&aacute;ctanos</li>     </ul> </div> 

and

$(function(){         $('#slider-buttons a').click(function(){         var x = $(this).attr('id');         var y = $('li#item_' + x);          if(x == 'inicio')                 $(this).animate({ 'left' : '0px'},700);         else                 $(this).animate({ 'left' : (increment*3) + 'px'},700);     }); });