переключение элемента по событию
Здравствуйте.
Есть блок в нем список элементов с одинаковым классом. при нажатии на стрелочку вверх вниз происходить должен выбор элемента из списка... как это реализовать ? Вот код оброботки нажатой клавиши $(function(){ $('#inputString').keypress(function(event){ if (event.keyCode == '40'){ сдесь обработка спанов } }); }); решать не надо, подскажите куда копать |
var $items = $('.тут селектор');
var active = 0;
// ...
if (event.keyCode == 40 || event.keyCode == 38) {
$items.eq(active).removeClass('active');
var step = {40: 1, 38: -1}[event.keyCode];
// циркулирующий инкремент/декремент
active = ($items.length + step) % $items.length;
$items.eq(active).addClass('active');
}
|
выделяет только второй и предпоследний спаны...
вот код $(document).ready(function(){ $('#inputString').keypress(function(event){ var $items = $('.category'); var active = 0; // ... if (event.keyCode == 40 || event.keyCode == 38) { $items.eq(active).removeClass('active'); var step = {40: 1, 38: -1}[event.keyCode]; // циркулирующий инкремент/декремент active = ($items.length + step) % $items.length; $items.eq(active).addClass('active'); } }); }); |
Цитата:
http://jquery-docs.ru/Traversing/next/#expr и http://jquery-docs.ru/Traversing/prev/#expr От текущего с классом active... Плюс отработка если уже на первом... И если на последнем... |
как запомнить тот элемент к которому обратился в первый раз функцией?
function(){ $('#searchresults').first('span').next(); его как то надо запомнить и передать этот элемент в следующий вызов как это сделать???? return this; } иммено структуру не могу создать( |
$items и active нужно объявить выше, вне функции keypress
|
из за переноса $items и active функция не работает ... сам селектор var $items = $('.category') - создается через ajax после ввода 3 букв(это диномический поисковик базы данных) та проблему которую мы решаем это переходы по результатам.... если он создается этот список после того как мы ввели 3 буквы каков синтаксис $items и active ?
|
сам блок результатов иммеет структуру
<div id ="searchresults" > <span class="category"> </span> <span class="category"> </span> <span class="category"> </span> <span class="category"> </span> <span class="category"> </span> <span class="category"> </span> <span class="category"> </span> </div> |
Цитата:
|
$(function(){
var $items = $('.category'); var active = 0; $('#searchresults').first('span').attr('class', 'active'); $('#inputString').keypress(function(event){ if (event.keyCode == 40 || event.keyCode == 38) { $items.eq(active).removeClass('active'); var step = {40: 1, 38: -1}[event.keyCode]; // циркулирующий инкремент/декремент active = ($items.length + step) % $items.length; $items.eq(active).addClass('active'); } }); }); так ? |
<style>
.listbox{
width: 200px;
border: 1px solid #777;
padding: 0;
margin: 0;
}
.item{
background: #eee;
border: 1px solid red;
list-style: none;
padding: 2px;
margin: 0;
}
.item.active{
background: red;
color: white;
}
</style>
<ul class="listbox">
<li class="item">Lorem</li>
<li class="item">Ipsum</li>
<li class="item">Lorem</li>
<li class="item">Ipsum</li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var $items = $('.item');
var active = 0;
document.body.focus();
$items.eq(0).addClass('active');
$(document).keydown(function(event){
if (event.keyCode == 40 || event.keyCode == 38) {
$items.eq(active).removeClass('active');
var step = {40: 1, 38: -1}[event.keyCode];
// циркулирующий инкремент/декремент
active = ($items.length + active + step) % $items.length;
$items.eq(active).addClass('active');
event.preventDefault();
}
});
</script>
|
Цитата:
$('#searchresults > span:first-child').addClass('active');
|
| Часовой пояс GMT +3, время: 03:40. |