Оптимизация скрипта
Есть два дива: в первом диве отображаеться картинка, во втором список ссылок (менюшка). В зависимости от того на какой пункт меню во втором диве наведен курсор, в первом диве меняется картинка.
Первый див с картинками: <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>, тогда бы код стал меньше (не было бы повторений кусков кода). Но тогда придеться переделывать движок сайта из-за одной менюшки. |
$('li').each(function (i) {
$(this).hover(function () {
$('#img' + i + 1).fadeOut();
}, function () {
$('#img' + i + 1).fadeIn();
});
});
|
Спасибо, 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 предложил только идею, за это ему спасибо. |
От конкатенации можно избавиться так:
$('#img' + (i + 1))
|
| Часовой пояс GMT +3, время: 21:38. |