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

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

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>
Ответить с цитированием