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> |
Возможно, правильным решением будет :
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,
Во-первых функции пофег такая конструция if (!$(b).hasClass('selected')){ $(b).hover(function() { Она будет ставить обработчик на все b (*условия либо нужно ставить внутри, либо обезличивать и переприсваивать, в данном случае внутри функции проще Во вторых - сгенерите рабочий пример для песочницы, или дайте ссылку на тестовую страницу В третьих, - а будет ли работать эта конструкция ? if (!$(b).hasClass('selected')){ Типовое использование .hasClass: if ($(a).hasClass()!='selected'){ |
Вложений: 1
Да, посмотрите, пожалуйста. Уж очень некрасивый и неэффективный вышел JS.
|
|
|
Да. Но это лишь потому, что у меня такой огромный JS файл. Я бы хотел все то, что там написано завернуть в цикл. Я пробовал, но получились непонятные эффекты. Хотелось бы это понять.
|
Madgeniy,
А на кой нужен цикл - поясните ? Просто работаете с двумя классами 1. класс - соотвествует строке 2. класс соответствует колонке - coolsN При при любом hover на элемент колонки класа coolsN - добавляем третий класс HOVER к обеим элементам в колонке, при отведении - класс изымаем Эффекты прописываем в css по классу HOVER |
Часовой пояс GMT +3, время: 06:09. |