forum.boolean.name

forum.boolean.name (http://forum.boolean.name/index.php)
-   JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)
-   -   jQuery - обращение к эллементам с разными id (http://forum.boolean.name/showthread.php?t=19705)

Trazzy 21.02.2015 18:17
jQuery - обращение к эллементам с разными id
 
Начал изучать jQuery и так как с подобными языками дела имел мало - не могу допереть как упростить такого рода код:

PHP код:
$("#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 
таким вариантом не получается:

PHP код:
for ( var i = 1; i <= 10; i++ ) {

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

} 
что посоветуете? :4to:

ABTOMAT 21.02.2015 19:14
Ответ: jQuery - обращение к эллементам с разными id
 
Без того, чтобы увидеть html ничего непонятно. Дежурный телепат, к сожалению, в отпуске.

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

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

Trazzy 21.02.2015 20:31
Ответ: jQuery - обращение к эллементам с разными id
 
(код немного видоизменен, но все же)

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

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

ABTOMAT 21.02.2015 21:15
Ответ: jQuery - обращение к эллементам с разными id
 
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 21.02.2015 21:42
Ответ: jQuery - обращение к эллементам с разными id
 
Цитата:
Сообщение от ABTOMAT (Сообщение 293424)
Кстати если тебе нужно только менять css, то javascript вообще тут не нужен.
Можно сделать при помощи псевдокласса :hover
Да. Это я знаю.
Не только css, у меня второй блок не цвет меняет, а двигается с помощью jQuery.

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

ABTOMAT 21.02.2015 22:10
Ответ: jQuery - обращение к эллементам с разными id
 
Цитата:
Сообщение от 2Fake (Сообщение 293426)
Да. Это я знаю.
Не только css, у меня второй блок не цвет меняет, а двигается с помощью jQuery.

Огромное спасибо. Было познавательно.
Рад объяснить, когда в объяснение вникают. :ok:


Часовой пояс GMT +4, время: 10:04.

vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot