jQuery - обращение к эллементам с разными id

[Trazzy]

Начал изучать jQuery и так как с подобными языками дела имел мало - не могу допереть как упростить такого рода код:

$("#b1").hover(
  function () {
    $("#t1").animate ({top:"120px"}, 200);
  }, 
  function () {
    $("#t1").animate ({top:"150px"}, 200);
  }
);

$("#b2").hover(
  function () {
    $("#t2").animate ({top:"120px"}, 200);
  }, 
  function () {
    $("#t2").animate ({top:"150px"}, 200);
  }
);

//... и так до 10 


таким вариантом не получается:

for ( var i = 1; i <= 10; i++ ) {

$("#b"+i).hover(
  function () {
    $("#t"+i).animate ({top:"120px"}, 200);
  }, 
  function () {
    $("#t"+i).animate ({top:"150px"}, 200);
  }
);

} 


что посоветуете?

[ABTOMAT]

Без того, чтобы увидеть html ничего непонятно. Дежурный телепат, к сожалению, в отпуске.

Второй пример кода не работает, скорее всего, потому, что i внутри анонимных функций находится в другой области видимости.

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

[Trazzy]

(код немного видоизменен, но все же)

http://jsfiddle.net/4k6j8Lee/ - так реализовано сейчас

https://jsfiddle.net/51xo3qrq/ - как-то так нужно упростить

[ABTOMAT]

http://jsfiddle.net/4k6j8Lee/7/

Чтоб упросить я обернул кнопки в div с классом foo. id'шники вообще убрал, это говнокод.
А потом сделал обработку для каждого .foo через jQuery.each.
Как видишь, внутри each $(this) представляет собой родительский блок.
Две кнопки (.btn и .btn2) я нахожу через jQuery.find, и далее пишу событие на hover для одной, чтобы загоралась вторая.

То есть код как бы "локально" выполняется для каждого блока с двумя кнопками.

https://jsfiddle.net/51xo3qrq/2/

А тут не работало потому что функция вызывается не в момент прохода цикла, а в момент события. Так как цикл уже к тому времени завершился, то i будет всегда 4. Чтобы заработало нужно сгенерировать анонимную функцию с "вшитым" значением i на данный момент (вот как я показал).
Но это жопный способ. Лучше используй предыдущий.


Советую посмотреть этот видос: http://try.jquery.com/levels/2/challenges/2

Кстати если тебе нужно только менять css, то javascript вообще тут не нужен.
Можно сделать при помощи псевдокласса :hover

http://jsfiddle.net/os469ozs/1/ (я добавил всего только одно правило в конец)

[Trazzy]

Сообщение от ABTOMAT

Кстати если тебе нужно только менять css, то javascript вообще тут не нужен.
Можно сделать при помощи псевдокласса :hover

Да. Это я знаю.
Не только css, у меня второй блок не цвет меняет, а двигается с помощью jQuery.

Огромное спасибо. Было познавательно.

[ABTOMAT]

Сообщение от 2Fake

Да. Это я знаю.
Не только css, у меня второй блок не цвет меняет, а двигается с помощью jQuery.

Огромное спасибо. Было познавательно.

Рад объяснить, когда в объяснение вникают.