Ошибка при нажатии клавиш для завершения действия

У меня есть кнопки «Предыдущий/Следующий». С кодом, который я собираюсь предоставить, он добавляет и удаляет класс .fadeaway.Ошибка при нажатии клавиш для завершения действия

$("a.next").click(function(){ 
     var elem=document.querySelector("#project-container"); 

     elem.classList.add("fadeaway"); 
     setTimeout(function(){ 
     goToNextProject(); 
     elem.classList.remove("fadeaway") 
     }, 350) 

     return false; 
    }); 

    $("a.prev").click(function(){ 
     var elem=document.querySelector("#project-container"); 

     elem.classList.add("fadeaway"); 
     setTimeout(function(){ 
     goToPrevProject(); 
     elem.classList.remove("fadeaway") 
     }, 350) 

     return false; 
    });

На стороне примечания, готов поспорить, есть способ объединить эти два. Поэтому проблема заключается в нажатии клавиши. В настоящее время у меня есть js для навигации по предыдущим/следующим элементам с помощью клавиш со стрелками.

function activateKeyNav() 
    { 
     // Description: register keypress event on document object 
     jQuery(document).on('keydown', function(event) { 
      switch(event.which) 
      { 
       case 39: // right 
        goToNextProject(); 
        break; 

       case 37: // left 
        goToPrevProject(); 
        break; 
      } 
     }); 
    }

Я не уверен, как создать анимацию, которая .fadeaway делает, это 0 так выцветает и из #project-container. Мне нужно, где, если нажаты левая или правая клавиши, это добавление и удаление класса .fadeaway, как это делают a.next и a.prev.

Чтобы получить рабочий пример, нажмите на кнопки prev/next here.

источник

2016-05-19 Darren Bachan

Вы можете создать скрипку? –

@DarrenBachan Сочетание двух обработчиков событий в порядке. Что еще вы спрашиваете? Сценарий будет полезен – Chintan

@Chintan Я не уверен, как построить скрипку для этого. Контейнер # проекта-я нацелен на загрузку данных из строки. Кнопки prev/next открывают и закрывают # project-container. Это сложно, это не идеально, но так оно и есть. Лучший пример, который я могу вам показать, - это ссылка в моем сообщении, когда вы открываете проект и нажимаете кнопки prev/next, вы увидите, что div исчезает. Мне нужны клавиши со стрелками, чтобы делать то же самое. –

Вы можете написать функцию-оболочку, которая добавит класс fadeaway и сделает setTimeout.

function toggleFadeAwayClass(){ 
    var elem=document.querySelector("#project-container"); 
    elem.classList.add("fadeaway"); 
    setTimeout(function(){ 
     elem.classList.remove("fadeaway") 
    }, 350) 
} 

function activateKeyNav() 
    { 
     // Description: register keypress event on document object 
     jQuery(document).on('keydown', function(event) { 
      switch(event.which) 
      { 
       case 39: // right 
        toggleFadeAwayClass(); 
        goToNextProject(); 
        break; 

       case 37: // left 
        toggleFadeAwayClass(); 
        goToPrevProject(); 
        break; 
      } 
     }); 
    }

Надеюсь, это поможет вам.

источник

2016-05-19 11:58:00 Bkjain655

Это действительно близко. Я обновил файлы, поэтому ссылка в моем исходном сообщении показывает этот код. Это странно. Кнопки prev/next красиво исчезают, но со стрелками я вижу div, он исчезает и исчезает. –

После того, как я больше экспериментировал с этим, мне пришлось удалить его. Это закончилось тем, что любой ключ на клавиатуре запускался. –

К сожалению, я пропустил это. Вам нужно добавить вызов внутри корпуса коммутатора. Обновлен ответ – Bkjain655

Проанализировав JS, чтобы точно знать, как исчезающие работы, и с помощью частичного кода из другого ответа, это то, как я сделал это увядают, как именно я хотел, чтобы она:

function activateKeyNav() 
    { 
     // Description: register keypress event on document object 
     jQuery(document).on('keydown', function(event) { 
      switch(event.which) 
      { 
       case 39: // right 
       var elem=document.querySelector("#project-container"); 
        elem.classList.add("fadeaway"); 
        setTimeout(function(){ 
         goToNextProject(); 
         elem.classList.remove("fadeaway") 
        }, 350) 
        // toggleFadeAwayClass(); 
        // goToNextProject(); 
        break; 

       case 37: // left 
       var elem=document.querySelector("#project-container"); 
        elem.classList.add("fadeaway"); 
        setTimeout(function(){ 
         goToPrevProject(); 
         elem.classList.remove("fadeaway") 
        }, 350) 
        // toggleFadeAwayClass(); 
        // goToPrevProject(); 
        break; 

       case 27: // escape 
        hasher.setHash(); 
        projectClose(); 
        break; 
      } 
     }); 
    }

Я подумал, что если var elem=document.querySelector("#project-container"); было определено, что я больше не нуждался в этом, поэтому я попробовал его без него, и elem не был определен, поэтому он создал консольную ошибку. Возможно ли установить эту переменную на самом верху, поэтому мне не нужно ее писать?

источник

2016-05-20 07:00:24

Ошибка при нажатии клавиш для завершения действия

ответ

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