Hover на объекты, где в качестве селектора используется переменная

[Madgeniy]

Всем привет!
Возникла проблема с данным кодом:

var i = 0;

			var a = '#linkID'+i;
			var b = '#pictID'+i;
	
			
    		if (!$(a).hasClass('blue_links')){

   		   
    		
    			$(a).hover(function() {
    			$(a).css("backgroundImage","url('images/main/button_gray.png')");
    			$(b).css("backgroundImage","url('images/main/pict_background_hover.png')");
     			},function() {
    				$(a).css("backgroundImage","none");
    				$(b).css("backgroundImage","none");
    			});
    		}
    		
    		
    		
			if (!$(b).hasClass('selected')){
				$(b).hover(function() {
    			$(a).css("backgroundImage","url('images/main/button_gray.png')");
    			$(b).css("backgroundImage","url('images/main/pict_background_hover.png')");
   	  		},function() {
    				$(a).css("backgroundImage","none");
    				$(b).css("backgroundImage","none");
    			});
			
			}
			else{
    			$(b).corner('left 5px');
    		}

В чем суть. Хочу чтобы в двухстрочном меню при наведении мыши на нижнюю или на верхнюю часть подсвечивалась соответственно верхняя или нижняя часть меню, т.е. его столбец.
Проблема возникла, когда я попытался в цикле по i менять

var a = '#linkID'+i;
var b = '#pictID'+i;

Эффектом такого изменения становилось то, что обработчик hover вешался только на последний элемент меню, т.е. на тот, на котором останавливался цикл. И наведение мыши на предшествующие элементы вызвывало изменение фона только на последнем столбце меню.
В чем проблема мне не очень ясно, может быть тонкости в том, что переменные - ссылки. Подумав таким образом, я решил использовать массив имен блоков. Но тогда эффекта не было никакого вообще.
В чем может быть проблема?

html:

<div class="links_reg">
						<a href="" class="blue_links" id="linkID0">Профиль</a>
						<a href="" class="white_links" id="linkID1">Контакты</a>
						<a href="" class="white_links" id="linkID2">Задачи</a>
						<a href="" class="white_links" id="linkID3">Сообщения</a>
						<a href="" class="white_links" id="linkID4">Документы</a>
						<a href="" class="white_links" id="linkID5">Уведомления</a>
						<a href="" class="white_links" id="linkID6">Структура</a>
					</div>	


<div id="pict_links">
						<a href="" id="pictID0" class="selected"><img src="images/main/pict_profile.png" width="74" height="80" alt="Профиль" ></a>
						<a href="" id="pictID1"><img src="images/main/pict_peoples.png" width="74" height="80" alt="" ></a>
						<a href="" id="pictID2"><img src="images/main/pict_notes.png" width="74" height="80" alt="" ></a>
						<a href="" id="pictID3">
							<div class="wrapper"><div class="orange_count">100</div></div>
							<img src="images/main/pict_envelope.png" width="74" height="80" alt="" >
						</a>
						<a href="" id="pictID4">
							<div class="wrapper"><div class="blue_count">130</div></div>
							<img src="images/main/pict_book.png" width="74" height="80" alt="" >
						</a>
						<a href="" id="pictID5"><img src="images/main/pict_uved.png" width="74" height="80" alt="" ></a>	
						<a href="" id="pictID6"><img src="images/main/pict_struct.png" width="74" height="80" alt="" ></a>					
					</div>

[melky]

Возможно, правильным решением будет :

for(var i = 0; i < *!*Ваше число*/!*; i += 1) {

			var a = '#linkID'+i;
			var b = '#pictID'+i;
	
			
    		if (!$(a).hasClass('blue_links')){
               // оставшаяся часть кода.
*!*
} // don't forget closing bracket
*/!*

[Madgeniy]

Я пробовал так сделать, но происходит эффект, описанный выше.

[Deff]

Madgeniy,
Во-первых функции пофег такая конструция
if (!$(b).hasClass('selected')){
$(b).hover(function() {

Она будет ставить обработчик на все b (*условия либо нужно ставить внутри, либо обезличивать и переприсваивать,
в данном случае внутри функции проще

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

В третьих, - а будет ли работать эта конструкция ?
if (!$(b).hasClass('selected')){

Типовое использование .hasClass:
if ($(a).hasClass()!='selected'){

[Madgeniy]

Да, посмотрите, пожалуйста. Уж очень некрасивый и неэффективный вышел JS.

[Madgeniy]

http://multi-up.com/713321

[Deff]

Madgeniy,
В Опере - Мозилле и Хроме - всё подсвечивается, Ие не проверял

[Madgeniy]

Да. Но это лишь потому, что у меня такой огромный JS файл. Я бы хотел все то, что там написано завернуть в цикл. Я пробовал, но получились непонятные эффекты. Хотелось бы это понять.

[Deff]

Madgeniy,
А на кой нужен цикл - поясните ?
Просто работаете с двумя классами
1. класс - соотвествует строке
2. класс соответствует колонке - coolsN

При при любом hover на элемент колонки класа coolsN - добавляем третий класс HOVER к обеим элементам в колонке,
при отведении - класс изымаем
Эффекты прописываем в css по классу HOVER