2016-03-09 2 views
0

Так у меня есть массив:Как создать функцию, которая перемещается по массиву?

var summaryList; 
summaryList = ['a','b','c', 'd'] 

Каждый элемент массива представляет собой элемент, я хочу, чтобы захватить внимание. Я хочу сделать это, используя клавиши со стрелками влево/вправо, которые перемещаются по каждому элементу массива. После фокусировки называется, я хочу, чтобы установить границу на желтый, чтобы показать, что это активный:

$(document).keydown(function(e){ 
     if (e.keyCode == 37) { 
      console.log('left')   
     } 
     if (e.keyCode == 39) { 
      var pos; 
      pos = this.summaryList[]; 

      console.log('right'); 
      console.log(pos); 
      $(pos[0 +1]).focus().css('border', "yellow"); 
     } 
}); 

Моя проблема заключается в том, что console.log (поз) возвращается как неопределенные, когда я хочу, чтобы прочитать ток элемент в массиве summaryList. После каждого нажатия клавиши, элемент массива должен перемещаться по одной позиции индекса

+0

напишите свой html пожалуйста – user2079802

+3

Хорошо, но до сих пор вы не описали * проблему *. Stackoverflow здесь для вас, когда вы застряли в написании своего кода, потому что вы столкнулись с ситуацией, когда, по вашему мнению, ваш код должен что-то делать, но вместо этого он делает что-то еще, и, исследуя его самостоятельно, Подумайте, почему это было бы. SO здесь не для того, чтобы помочь вам написать свой код во время работы над ним. –

+0

Вы можете изменить цвет в таблице стилей с помощью селектора ': focus'. – nnnnnn

ответ

2
var summaryList = ['a', 'b', 'c', 'd']; 

// Hold reference to the currently focussed position 
var currentPosition = 0; 

// Maximum position we can navigate to is the last item in the summary list 
var maxFocusablePosition = summaryList.length - 1; 

// Utility function to focus a given position value 
function focusPosition(position) { 
    $(summaryList[position]).focus().css('border', 'yellow'); 
} 

// Focus the first one by default 
focusPosition(currentPosition); 

$(document).keydown(function (event) { 
    if (event.keyCode === 37) { 
     currentPosition > 0 ? currentPosition-- : 0; 
    } 

    if (event.keyCode === 39) { 
     currentPosition < maxFocusablePosition ? currentPosition++ : maxFocusablePosition; 
    } 

    focusPosition(currentPosition); 
}); 
+0

Спасибо за ваш вклад, я вижу, что ваше мышление написало эту логику, но не набирает клавиши, но –

+0

Обработчик keydown не вызывается? – Prashant

+0

Вызывается обработчик keydown, я приложил 2 оператора console.log, чтобы проверить это. Строки из журнала отображаются, но функция не работает. Ошибок нет –

0

pos = this.summaryList;

должно быть просто

pos = summaryList;

this относится к документу. В окне определяется итоговый список.

В качестве альтернативы вы можете сделать window.summaryList, но редко бывает необходимо добавить «окно». при вызове объектов из глобальной области.


Другая проблема у вас есть ..

$(pos[0 +1]).focus().css('border', "yellow");

pos[0 +1] будет элемент из вашего массива, например, "C".

$('c') недействительный селектор, так что это просто путает jQuery.

+0

массив представляет идентификаторы жестко закодированных элементов, с селектором нет проблемы –

+0

@KunalOjha '$ ('c')' не является допустимым селектором. период. вы выбираете элементы по id следующим образом: '$ ('# c')' –

Смежные вопросы