Показать сообщение отдельно
  #1 (permalink)  
Старый 18.10.2011, 17:13
Интересующийся
Отправить личное сообщение для Kaba Посмотреть профиль Найти все сообщения от Kaba
 
Регистрация: 18.10.2011
Сообщений: 19

НЕ получается правильно организовать цикл
Есть небольшой кусочек кода, с помощью которого идет появление/скрытие элемента при наведении на ссылку.
Чтобы не прописывать код отдельно для каждой ссылки (сейчас ссылок 8, хотя может быть много), решил организовать цикл, но из-за jquery, как я понял он работает некорректно, а именно всегда в событии переменные classEl='#elem-8' и classBut='#menu-but-8'.
В итоге, при наведении, вместо необходимых, отображается всегда последний элемент.

Подскажите что именно делаю не так?

Код скрипта:
<script type="text/javascript">
$(document).ready(function() {

	for(i=1; i<=8; i++) {
		var classEl;
		classEl = '#elem-' + i;
		var classBut;
		classBut = '#menu-but-' + i;
		
		
		$(classBut).hover(
			function(){
				$(classEl).stop(true, true).fadeIn(500);
				$("#inner-block").stop(true, true).fadeOut(1000);
			},
			function(){
				$(classEl).stop(true, true).fadeOut(1400);
				$("#inner-block").stop(true, true).fadeIn(600);
			}
		);
	}

});
</script>


Код ХТМЛ:
<div id="block-menu">
			<div class="index-images">
				<div style="background: url(img/img-1.gif)"></div>
				<div style="background: url(img/img-2.gif)"></div>
				<div style="background: url(img/img-3.gif)"></div>
				<div style="background: url(img/img-4.gif)"></div>
				<div style="background: url(img/img-5.gif)"></div>
				<div style="background: url(img/img-6.gif)"></div>
				<div style="background: url(img/img-7.gif)"></div>
				<div style="background: url(img/img-8.gif)"></div>
			</div>
			<div id="inner-block"></div>
			
			<a href="#" id="menu-but-1">бла бла бла</a>
			<div id="elem-1"></div>
			
			<a href="#" id="menu-but-2">бла бла бла</a>
			<div id="elem-2"></div>
			
			<a href="#" id="menu-but-3">бла бла бла</a>
			<div id="elem-3"></div>
			
			<a href="#" id="menu-but-4">бла бла бла</a>
			<div id="elem-4"></div>

			<a href="#" id="menu-but-5">бла бла бла</a>
			<div id="elem-5"></div>

			<a href="#" id="menu-but-6">бла бла бла</a>
			<div id="elem-6"></div>

			<a href="#" id="menu-but-7">бла бла бла</a>
			<div id="elem-7"></div>

			<a href="#" id="menu-but-8">бла бла бла</a>
			<div id="elem-8"></div>
		</div>
Ответить с цитированием