我的代码有什么问题？

Question

I have 4 links, when each link is clicked, I am taking the index of that link. I am getting index + 1 = 1, 2, 3 4 like this. According to me when user click on the link, the indexed 'li' need to fadeIn, reset have to fadeOut. so, whatever the link is clicked according to the link index + 1 have to fadeIn, rest should not in the view. for this I wrote this code, but not working. what is wrong with my code ?

$('#b-fmg-slider a').each(function(index){
    $(this).click(function(e){
        $('#b-fmg-slider a').removeAttr('class');
        $('#b-fmg-slider ul li').fadeOut();
         $('#b-fmg-slider ul li',':nth-child('+index+1+')').fadeIn();
    })    
})

can any one say, whether what I am doing here is wrong?

thanks in advance.

Answer 1

This is can be achieved very easily using an alternative approach. First fadeout all the li-s (using a class selector), then fadeIn $(this) (the item which was clicked on).

As to why your code is wrong, you are using two separate selectors (if you separate them with a comma, they are separate selectors).

Answer 2

Try something like this:

$('#b-fmg-slider a').click(function (e) {
  $('#b-fmg-slider ul li').fadeOut();
  $(this).parent('li').next('li').fadeIn();
});

Fading out all the li-s and then finding the li which you clicked on (if its not a direct descendant, use parents() instead of parent() ), then find the one after it - to fade him in.

Answer 3

When you pass in a second parameter, you're actually giving jQuery a context to work on

$('#b-fmg-slider ul li',':nth-child('+index+1+')').fadeIn();//does not work

Just use the index and a filter

var i = $(this).index();
$('#b-fmg-slider ul li:eq(' + i + ')').fadeIn();

Here's a simple fiddle : http://jsfiddle.net/WU7Tt/