Сжать код

[a1rborn]

Еще раз прошу объяснить структуру построения кода)

Собственно есть страничка, на который более 20 ссылок (списки, img).

По клику на ссылку x1, divX меняется на div1.

По клику x2, divX меняется на div2.

И т.д., где divX - див с номером соответствующим активной ссылки.

Допустим div19 при клике на x5, сменится на div5. Вроде ясно объяснил)

var x1 = $('.x1'),
	  x2 = $('.x2'),
	  divY = $('.divY');
x1.on('click', function(){
  $.when(
    divY.children().fadeOut('slow'))
  .then
  (function() {divY.find('.x1').fadeIn('slow');}
    );
}
  );

Вот что у меня получилось, но таких кусков значит надо будет писать порядка 20, а это загромоздит мне там все)

Можно ли как то все эти операции засунуть в один кусок, пусть большой, но меньший чем 20 маленьких.

Каким синтаксическим выражением можно воспользоваться для уменьшения кода?

Пробовал подставлять ссылкам id и class, где class соответствовал классу диву, кот. должен появиться. Не вышло

Задействовал this - тоже не получилось.

Пока в раздумьях....

[uuu]

как бы я попробовал сделать:

1. назначить обработчик на блок с ссылками

http://learn.javascript.ru/event-delegation

если ссылки разбросаны по странице, то вешал бы обработчики по классу через цикл

// если сначала старый блок исчезает и только потом появляется новый, то

2. прячем #divX с fadeOut

3. копируем адрес ссылки, на которую кликнули

http://learn.javascript.ru/obtaining-event-object

4. вставляем необходимое содержимое в блок #divX

5. показываем блок с fadeIn

если не получится, и если выложишь заготовку со всеми блоками на http://jsfiddle.net/ то могу попробовать сделать

[a1rborn]

Спасибо за совет, буду читать и пробовать.

Спасибо также за предложенную помощь, но все таки мне хватит совета, напишу все сам =)

[uuu]

Если что обращайтесь