Reza San Reza San - 4 months ago 16
jQuery Question

jQuert select an eq target from other list that's not selected

jQuery Gurus please help:
Can't get the "not" to work. When I click on a list, I want to use that index to target a list of absolute images. The chosen background image stored in a list will not fade out but the rest will. The chosen one will stay.

$('.accordion-item').click(function(){
var index=$(this).index();
var rotationImage = $('.image-rotation li');
rotationImage.not('eq(index)').fadeout;
rotationImage.eq(index).fadeIn();
});


Codepen: http://codepen.io/rezasan/pen/oLPYVr

Answer

Okay, let's see ...

  1. you should write :eq() no just eq()
  2. you have to escape index in the string of :eq() correctly
  3. it is .fadeOut() not just .fadeout

Everything else works fine in general. :)

$('.accordion-item').click(function(){
    var index = $(this).index();
    var rotationImage = $('.image-rotation li');
    rotationImage.not(':eq('+ index +')').fadeOut();
    rotationImage.eq(index).fadeIn();
});

And just to be complete, you could even do this in a single chain and don't need not() at all:

$('.accordion-item').click(function(){
    $('.image-rotation li').fadeOut().eq($(this).index()).fadeIn();
});

Working example. (updated codepen)