Keyboard Shortcut 'p' for previous article


#1



https://www.codecademy.com/en/courses/web-beginner-en-4hxyb/0/9?content_from=make-an-interactive-website%3Ajquery-events


I wanted to add a feature to go to previous article for key 'P'. I did the same process as that for next article but used previous() instead of next() and variable prevArticle instead of nextArticle.

But it shows error as,
Uncaught TypeError: currentArticle.previous is not a function


var main = function(){
    $('.article').click(function(){
        $('.description').hide();
        $('.article').removeClass('current');
        $(this).addClass('current');
        $(this).children('.description').show();
    });
}

$(document).ready(main);
$(document).keypress(function(event){
  if(event.which === 111){
        $('.current').children('.description').toggle();
    }
  else if(event.which === 110){
        var currentArticle = $('.current');
        var nextArticle = currentArticle.next();
        
        $(currentArticle).removeClass('current');
        $(nextArticle).addClass('current');    
    }
  else if(event.which === 112){
        var currentArticle = $('.current');
        var prevArticle = currentArticle.previous();
        
        $(currentArticle).removeClass('current');
        $(prevArticle).addClass('current');    
    }

});


#2

Hi first your your code should have that structture

var main = function(){
    $('.article').click(function(){
        ...
    });

    $(document).keypress(function(event){
        ...
    });
};

$(document).ready(main);

then here

  else if(event.which === 112){
        var currentArticle = $('.current');
        var prevArticle = currentArticle.previous();
        
        $(currentArticle).removeClass('current');
        $(prevArticle).addClass('current');    
    }

this line

var prevArticle = currentArticle.previous();

instead of .previous() you should use .prev()


#3

@arraysurfer13666

++++ DOM representation Interactive Website +++++++++++
As a starter, I took the index.html apart...
This is a Document Object Model representation
The numbers are the line-numbers where the Tag can be found...
So we have a 76-div which in this diagram has the class attribute current
I will use this diagram as reference in the explanation in separate Post's

                   html
                    |
      + - - - - - - + - - - - - -+
      |                          |
      3                          7
     head                       body
      |                          |
  + - + - +          + - - - - - + - - - - - - +
  |       |          |           |             |
  4       5          8          165           166
 link    link       div        script        script
                 .articles
                 .container
                     |
 + - - - + - - - + - + - + - - - + - - - + - - - +
 |       |       |       |       |       |       |
 10      32      54      76      98     120     142
 div     div     div     div     div    div     div  < .article
                      .current                     sibling's  
                          |                          .next()
           +- - - - - - - + - - - - - - - - +
           |                                |
           77                               88
          .item                        .description
           div                              div
            |                                |
  + - - - - + - - - -+           + - - - - - + - - - - -+
  |         |        |           |           |          |
  78        81       84          89          90         94
  div       div      div         div         div        div
                                              |
                                      + - - - + - - - +
                                      |               |
                                      h1              p

By using the description-class in the jQuery selector $('.description')
you will create a jQuery object which has 7 properties
which are the 7 div Element's that have the class="description" set.
We hide them all by using:
$('.description').hide();

So we have a 76-div which in this diagram has the class attribute current
By using the current-class in the jQuery selector, $(".current")
you will create a jQuery object which has 2 Children
being the 77-div and the 88-div,
these can be targeted by using their ".item" or ".description" class-attribute
$('.current').children('.description').show();

In this diagram you see that the 8-div has 7 Children,
These Children are Siblings to each other,

   8-div - - - - -+
                  | /7-Children/
        .article  + 10-div [first-child]
                  |
        .article  + 32-div    As these div's are
                  |           'siblings' of each-other
                  |           we can use the
                  |           .prev() and .next() methods
                  |                           to navigate
        .article  + 54-div [prev]
                  |
        .article  + 76-div class="current"  - +/2children/
                  |                           + 77-div .item
        .article  + 98-div [next]             |
                  |                           + 88-div .description
        .article  +120-div                    
                  |
        .article  +142-div [last-child]

Reference
with a google search
== the Book ==
prev() site:jquery.com
https://api.jquery.com/prev/