Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2013, 11:56
Интересующийся
Отправить личное сообщение для Игорь_12345 Посмотреть профиль Найти все сообщения от Игорь_12345
 
Регистрация: 26.07.2013
Сообщений: 16

переключение элемента по событию
Здравствуйте.
Есть блок в нем список элементов с одинаковым классом.
при нажатии на стрелочку вверх вниз происходить должен выбор элемента из списка... как это реализовать ?
Вот код оброботки нажатой клавиши
$(function(){

$('#inputString').keypress(function(event){

if (event.keyCode == '40'){
сдесь обработка спанов
}

});
});
решать не надо, подскажите куда копать
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2013, 12:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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');
}
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2013, 13:37
Интересующийся
Отправить личное сообщение для Игорь_12345 Посмотреть профиль Найти все сообщения от Игорь_12345
 
Регистрация: 26.07.2013
Сообщений: 16

выделяет только второй и предпоследний спаны...
вот код

$(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');
}


});
});
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2013, 13:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Игорь_12345
подскажите куда копать
Как вариант, использовать
http://jquery-docs.ru/Traversing/next/#expr
и
http://jquery-docs.ru/Traversing/prev/#expr
От текущего с классом active...

Плюс отработка если уже на первом... И если на последнем...
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2013, 13:47
Интересующийся
Отправить личное сообщение для Игорь_12345 Посмотреть профиль Найти все сообщения от Игорь_12345
 
Регистрация: 26.07.2013
Сообщений: 16

как запомнить тот элемент к которому обратился в первый раз функцией?
function(){
$('#searchresults').first('span').next(); его как то надо запомнить и передать этот элемент в следующий вызов как это сделать????


return this;
}
иммено структуру не могу создать(
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2013, 13:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

$items и active нужно объявить выше, вне функции keypress
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2013, 13:58
Интересующийся
Отправить личное сообщение для Игорь_12345 Посмотреть профиль Найти все сообщения от Игорь_12345
 
Регистрация: 26.07.2013
Сообщений: 16

из за переноса $items и active функция не работает ... сам селектор var $items = $('.category') - создается через ajax после ввода 3 букв(это диномический поисковик базы данных) та проблему которую мы решаем это переходы по результатам.... если он создается этот список после того как мы ввели 3 буквы каков синтаксис $items и active ?
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2013, 13:59
Интересующийся
Отправить личное сообщение для Игорь_12345 Посмотреть профиль Найти все сообщения от Игорь_12345
 
Регистрация: 26.07.2013
Сообщений: 16

сам блок результатов иммеет структуру
<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>
Ответить с цитированием
  #9 (permalink)  
Старый 05.08.2013, 14:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Игорь_12345
сам селектор var $items = $('.category') - создается через ajax после ввода 3 букв(это диномический поисковик базы данных) та проблему которую мы решаем это переходы по результатам....
Ну так сделай активным первый элемент... А кейпрес будет работать уже с тем, что есть...
Ответить с цитированием
  #10 (permalink)  
Старый 05.08.2013, 14:17
Интересующийся
Отправить личное сообщение для Игорь_12345 Посмотреть профиль Найти все сообщения от Игорь_12345
 
Регистрация: 26.07.2013
Сообщений: 16

$(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');
}


});
});
так ?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
как обратиться к items элемента из другого элемента и изменить его? Krepkii ExtJS 2 12.02.2013 14:53
Как то можно узнать ID HTML элемента вызвавшего JavaScript функцию? Opusel Events/DOM/Window 1 18.12.2011 18:36
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 17:58
помогите "уловить" момент появления элемента Bebarr Swallow Events/DOM/Window 4 18.03.2011 08:16