Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   forum.boolean.name > Веб-программирование > JavaScript / HTML

JavaScript / HTML Создание динамической разметки страниц

Ответ
 
Опции темы
Старый 21.02.2015, 18:17   #1
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Вопрос jQuery - обращение к эллементам с разными id

Начал изучать 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 1<= 10i++ ) {

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


что посоветуете?
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 21.02.2015, 19:14   #2
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: jQuery - обращение к эллементам с разными id

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

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

Пожалуйста, сделай пример здесь: http://jsfiddle.net/ чтобы можно было посмотреть, что конкретно не работает и исправить.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Старый 21.02.2015, 20:31   #3
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Ответ: jQuery - обращение к эллементам с разными id

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

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

https://jsfiddle.net/51xo3qrq/ - как-то так нужно упростить
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 21.02.2015, 21:15   #4
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: 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/ (я добавил всего только одно правило в конец)
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
LLI.T.A.L.K.E.R. (22.02.2015), Trazzy (21.02.2015)
Старый 21.02.2015, 21:42   #5
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Ответ: jQuery - обращение к эллементам с разными id

Сообщение от ABTOMAT Посмотреть сообщение
Кстати если тебе нужно только менять css, то javascript вообще тут не нужен.
Можно сделать при помощи псевдокласса :hover
Да. Это я знаю.
Не только css, у меня второй блок не цвет меняет, а двигается с помощью jQuery.

Огромное спасибо. Было познавательно.
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
ABTOMAT (21.02.2015)
Старый 21.02.2015, 22:10   #6
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: jQuery - обращение к эллементам с разными id

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

Огромное спасибо. Было познавательно.
Рад объяснить, когда в объяснение вникают.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


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


vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com