Привязать клавиатуру к левой / правой навигации - PullRequest
Новая
       25

Привязать клавиатуру к левой / правой навигации

5 голосов
/ 18 января 2012

Я фотограф и у меня есть веб-сайт, на котором я не могу редактировать структуру 'шаблона', но могу загрузить javascript / css и т. Д.

Я хочу связать следующую / предыдущую навигацию с клавиатурой вправо / влево.

Структура ссылок: 

<div class="image_navigation">
      <h4>Image Navigation</h4>
      <ul>
        <li class="index"><a href="LINKURL">Index</a></li>
        <li class="previous"><a href="LINKURL">Previous</a></li>
        <li class="next"><a href="LINKURL">Next</a></li>
      </ul>
    </div>

Я сослался на this и сумел создать это.

$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('li.prev').attr('href'); break;
    case 39 : window.location = $('li.next').attr('href'); break; }});});

Вот где я застрял.Он не работает, поскольку предполагает, что я ссылаюсь на тег href, но ссылаюсь на содержащий его li.

Любые идеи будут высоко оценены!

Ответы [ 4 ]

6 голосов
/ 18 января 2012 
window.location = $('li.next a').attr('href');
2 голосов
/ 02 октября 2012

Я нашел этот вопрос при поиске дубликатов на этом вопросе и решил поделиться небольшим количеством jQuery, которое я написал, чтобы ответить на этот вопрос, модифицированный для ваших селекторов: 

// when the document is ready, run this function
jQuery(function( $ ) {
    var keymap = {};

    // LEFT
    keymap[ 37 ] = "li.prev a";
    // RIGHT
    keymap[ 39 ] = "li.next a";

    $( document ).on( "keyup", function(event) {
        var href,
            selector = keymap[ event.which ];
        // if the key pressed was in our map, check for the href
        if ( selector ) {
            href = $( selector ).attr( "href" );
            if ( href ) {
                // navigate where the link points
                window.location = href;
            }
        }
    });
});
0 голосов
/ 18 января 2012

Вам нужно нацелиться на внутри . Я вижу, что вы используете jquery [и предположим, что вы включили необходимый файл jquery в заголовок].

http://api.jquery.com/child-selector/ - хорошее место, чтобы узнать о селекторах jquery.

Предполагая, что все остальное в вашем коде правильно, вы можете достичь того, что, я думаю, вы ищете с 

$(function() {
    $(document).keyup(function(e) {
        switch(e.keyCode) {
            case 37 : window.location = $('li.previous a').attr('href');
                break;
            case 39 : window.location = $('li.next a').attr('href');
                break; 
        }
    });
});
0 голосов
/ 18 января 2012 
$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('li.prev a').attr('href'); break;
case 39 : window.location = $('li.next a').attr('href'); break; }});});

$ ('li.next') предназначается для всех элементов списка с классом 'next', и все - он не знает о содержимом элемента списка.

Если вы хотитеhref тега a, вам нужно пойти немного глубже ($ ('li.next a') или $ (li.next '). find (' a ')) - ваш исходный код искал атрибут hrefсам элемент списка (который, конечно, не существует, поскольку элементы списка не имеют атрибутов href).

...