Обход набора кнопок при нажатии клавиш с помощью Jquery - PullRequest
Новая
       28

Обход набора кнопок при нажатии клавиш с помощью Jquery

0 голосов
/ 20 июля 2011

Я довольно новичок в JQuery, и у меня возникают проблемы с созданием поведения, которое позволило бы мне перемещаться по набору кнопок при нажатии клавиш (левая и правая кнопки на клавиатуре). Каждое нажатие должно менять цвет фона текущей кнопки.

HTML: 

<div id="featured_video_button_controls">
    <input class="featured_video_buttons" type="button" value="Fullscreen" />
    <input class="featured_video_buttons" type="button" value="Replay" onClick="ReplayVideo()" />
    <input class="featured_video_buttons" type="button" value="View Event" onClick="window.location.href='http://www.google.ca'" />
    <input class="featured_video_buttons" type="button" value="Back" onClick="window.history.back()" />
</div>

CSS: 

.featured_video_buttons
{
    width: 145px;
    height: 35px;
    background-image:url(/Content/Images/web_button_grey_bg.png); 
    font-weight: bold;  
}

.featured_video_buttons:hover
{
    background-image:url(/Content/Images/web_button_red_bg.png);
    color: White;    
}

Любая помощь будет оценена!

Спасибо.

1 Ответ

0 голосов
/ 20 июля 2011 
$('.featured_video_buttons').keydown(function(e){
    if (e.keyCode == 37) {
       $(this).toggleClass('hovered');
       $(this).last().toggleClass('hovered');
    }
    if (e.keyCode == 39) {
       $(this).toggleClass('hovered');
       $(this).next().toggleClass('hovered');
    }
}

Измените CSS на 

input.hovered{
   background-image:url(/Content/Images/web_button_red_bg.png);
   color: White;    
}
...