The N shortcut


#1

please help with this:

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

$(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');
}
});
};
$(document).ready(main);

When i click save & submit code this error appears: Oops, try again. It looks like the n key isn't moving to the next article. Remember to remove the 'current' class from currentArticle and place it on nextArticle.


#2

Hi Valentinog97,

You're missing a dot (.) right in front of current, but still inside the quotes :)


#3

@valentinog97,

1 The structure of the main-function

You are defining a function by the name main.

var main = function() {
     //BEGIN of function-body 
    //
    //Here comes all the code that will
    //be excuted, AFTER the DOCUMENT is READY
    // $(document).ready(main);

   //END of function-body
   };

  $(document).ready(main);

2 The structure with comments and 2 Event Handlers...

Within the function-body of the main function
we are going to define 2 so-called EVENT-Handlers
1 click-event-handler
2 keypress-event-handler

var main = function() {
     //BEGIN of function-body 
    //
    //The CLICK event-handler is
    //  attached to ALL elements with class=".article" in index.html
    // by using the -selector- $('.article') we SELECT all articles.
    $('.article').click(function() {
        //BEGIN of CLICK function-body
       //
       // Here we put all the code which is
       // executed when we CLICK on an -article-

       //END of CLICK function-body && CLICK event-handler
     });

     //now comes the KEYPRESS event-handler
     // this is attached to the WHOLE of the HTML-page//document
     //by using a -selector- $(document) we select the WHOLE page..

     $(document).keypress(function(event) {
          //BEGIN of KEYPRESS function-body

       //Here comes the code which is executed 
       // as a KEYBOARD key is Pressed we know which-key is pressed
       //by evaluating the EVENT.WHICH value.
       //  http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx
       // look in the column "Dec"

       //END of KEYPRESS function-body && close of KEYPRESS event handler
       });
   //END of function-body
   };

  $(document).ready(main);

3 The structure stripped of most comments.

So the structure of our main-function looks like:

var main = function() {
     //BEGIN of main function-body 
    //
    //The CLICK event-handler is

    $('.article').click(function() {

     });

     //now comes the KEYPRESS event-handler

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

       });
   //END of main function-body
   };

  $(document).ready(main);

===============================================

If you use $( )
you are using the so called jQuery selector

The selector will select ALL the HTML-Elements of the active HTML-page,
which have attribute you use as an argument.

Thus if you use
$(".article") you are selecting all the HTML-Element's
which have the class="article" set
( you will find 7 Article's)

The jQuery Selector will create an object
which will contain all those selected Elements. AND its children..

Talking in terms of DOM (=Document Object Model )
you select a parent and all its children which are in its tree

Here is the how the Document Object Model view looks like for
this HTML-page..

                   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

The numbers in the Diagram
represent the line-number in the index.HTML file.

So to get to the articles we follow the path
html -> 7-body -> 8-div
(we landed at the PARENT of ALL the Articles)
Those Articles are the CHILDREN to this PARENT.
And the CHILDREN between themselves are SIBLINGS.
And ALL these CHILDREN are carrying the Class article.

In this Diagram i have
put the current Class on the 4th Article...
this would happen if you clicked on the 4th-Article
at wich point you have this article at your fingers via this

$('.article').removeClass('current'); attribute class=current from all those Elements.

$('.description').hide();

$(this).addClass('current'); this as the way to identify this Element, add the Class attribute "current", which via the style.CSS file will cause the change

of color via the .current CSS-object,
but from now on if we use the jQuery Selection with the argument '.current'
like $('.current') , we know that we have selected 1 Article-Element, with ALL its CHILDREN

$(this).children('.description').show(); clicked-on Article and ALL its Elements, and from this collection of Elements, choose the Element with the Class "description" set, and show

that Element and all its Children.