Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2010, 16:22
Интересующийся
Отправить личное сообщение для Беляш Посмотреть профиль Найти все сообщения от Беляш
 
Регистрация: 14.03.2010
Сообщений: 16

Оптимизация скрипта
Есть два дива: в первом диве отображаеться картинка, во втором список ссылок (менюшка). В зависимости от того на какой пункт меню во втором диве наведен курсор, в первом диве меняется картинка.

Первый див с картинками:
<div class="pic">
	<img src="..." id="img1" />
	<img src="..." id="img2" />
	<img src="..." id="img3" />
</div>


Второй див со списком:
<ul>
	<li><a href="">Главная</a></li>
	<li><a href="">Методичка</a></li>
	<li><a href="">Выставки</a></li>
	<li><a href="">Поздравляем</a></li>
</ul>


jQuery:
$(document).ready(function() {
	$('li:eq(0)').hover(
		function() { $('#img1').fadeIn();},
		function() { $('#img1').fadeOut();}
	);
	$('li:eq(1)').hover(
		function() { $('#img2').fadeOut();},
		function() { $('#img2').fadeIn();}
	);
	$('li:eq(2)').hover(
		function() { $('#img3').fadeOut();},
		function() { $('#img3').fadeIn();}
	);
});


Вопрос: можно ли как-нить оптимизировать данные JS-строчки? Может с помощью цикла?

PS: Можно было бы размещать картинки непосредственно в списки вот так
<li><a href=""><img src="" /></a></li>
, тогда бы код стал меньше (не было бы повторений кусков кода). Но тогда придеться переделывать движок сайта из-за одной менюшки.
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2010, 16:35
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

$('li').each(function (i) {
	$(this).hover(function () {
		$('#img' + i + 1).fadeOut();
	}, function () {
		$('#img' + i + 1).fadeIn();
	});
});
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2010, 17:00
Интересующийся
Отправить личное сообщение для Беляш Посмотреть профиль Найти все сообщения от Беляш
 
Регистрация: 14.03.2010
Сообщений: 16

Спасибо, exec.

UPD: Вот что у меня получилось, возможно кому-нибудь пригодиться:
$('ul').each(function (i) {
	var k=i+1;
	$('li:eq('+i+')').hover(
		function () { $('#img' + k).fadeIn();},
		function () { $('#img' + k).fadeOut();}
	);
});


Касательно строчки
$('#img' + i + 1)
конкатенация строк происходит слева на право, а значит это выражение, допустим при i=0, дает id = img01, а не желаемый img1. Поэтому Я ввел var k=i+1 И в последствии её использовал.

PS: Я понимаю, что exec предложил только идею, за это ему спасибо.

Последний раз редактировалось Беляш, 10.07.2010 в 17:21.
Ответить с цитированием
  #4 (permalink)  
Старый 11.07.2010, 14:45
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

От конкатенации можно избавиться так:

$('#img' + (i + 1))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обнулить переменные после завершения скрипта QRS jQuery 3 07.07.2010 03:08
Google Chrome перерисовка страницы во время выполнения скрипта Dekart Javascript под браузер 0 08.06.2010 08:35
Круговорт скрипта.... Karl Общие вопросы Javascript 1 17.10.2009 15:37
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 12:03
Вызов скрипта в теле всплывающего окна на Javascript demchenko Я не знаю javascript 2 10.06.2009 10:46