Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   НЕ получается правильно организовать цикл (https://javascript.ru/forum/jquery/22410-ne-poluchaetsya-pravilno-organizovat-cikl.html)

Kaba 18.10.2011 17:13

НЕ получается правильно организовать цикл
 
Есть небольшой кусочек кода, с помощью которого идет появление/скрытие элемента при наведении на ссылку.
Чтобы не прописывать код отдельно для каждой ссылки (сейчас ссылок 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>

Serg_pnz 18.10.2011 17:40

Раз уж jquery, то
http://jquery.page2page.ru/index.php...BE%D1%80%D0%B5
http://jquery.page2page.ru/index.php...80%D0%BE%D0%BC

а для обхода массива
http://jquery.page2page.ru/index.php...BE%D1%80%D0%B0

потом, если они идут друг за другом (заголовок и его текст) можно и на этом попробовать сделать
http://jquery.page2page.ru/index.php...BD%D1%8B%D1%85

Kaba 18.10.2011 18:31

Спасибо за быстрый и конструктивный ответ.
Воспользовался выборкой с помощью next, что то я совсем про него забыл..

Андрей38 24.10.2011 17:25

Подскажите пожайлуста_есть ли в цикле for какой нибудь флаг,что цикл ЗАКОНЧЕН (те все элементы в цикле-пройдены) ?Я сделал это через ИФ_ ленгз==x {}но хотелось бы нормальное (его родное)решение

DjDiablo 24.10.2011 17:28

Некаких спец инструметов не существует.

Чтобы прервать цикл посередине юзай. if (условие) break;

Без команды break, можно обойтись как то так. Правда в отказе от break нет смысла :)
var breakTrigger=false;
for (var i=0;(i<100) && (!breakTrigger);i++){
  alert(i);
  if (i==3) breakTrigger=true;
}
// тут типо всякий код

// проверяем триггер и узнаем прерывался ли цикл
if (breakTrigger) alert("цикл закончен раньше времени")


Чтобы за пределами цикла посмотреть был ли прерван цикл устанавливай какой нибудь тригер внутри цикла, как в примере выше, и проверяй триггер там где тебе надо


Это что за запись такая : ИФ_ ленгз==x {} ? :)

ksa 24.10.2011 18:59

Цитата:

Сообщение от Андрей38
есть ли в цикле for какой нибудь флаг,что цикл ЗАКОНЧЕН (те все элементы в цикле-пройдены)

Если в теле цикла нет break и ты получил управление в следующей "строке" после цикла - он таки закончился (те все элементы в цикле-пройдены). :)

Андрей38 24.10.2011 20:40

Спасибо !
Я так и сделал ,и без брик_хотя с брик продвинутей выглядит
Вот так я сделал с самого начала

var t=$('div.w').length
тут цикл for ()
...If (i-1==t-1){
исполнение какого-то кода
}

Андрей38 24.10.2011 20:42

Цитата:

Сообщение от ksa (Сообщение 132618)
Если в теле цикла нет break и ты получил управление в следующей "строке" после цикла - он таки закончился (те все элементы в цикле-пройдены). :)

Спасибо,понял.Будем писать по -старинке ,те через иф.

ksa 25.10.2011 09:35

Цитата:

Сообщение от Андрей38
var t=$('div.w').length

У жиквери есть прекрасный метод each() для обхода "выборки"...
http://jquery-docs.ru/core/each/

И форы там всякие можно не писать...

Андрей38 25.10.2011 12:56

Цитата:

Сообщение от ksa (Сообщение 132653)
У жиквери есть прекрасный метод each() для обхода "выборки"...
http://jquery-docs.ru/core/each/

И форы там всякие можно не писать...

Спасибо за полезное напоминание об each
Я как раз перешел с each на for,так как FOR это новое для меня и допускает много эксперементов


Часовой пояс GMT +3, время: 02:01.