Can anyone see what's wrong with this code?


#1

I get the following error when attempting to run the code:

"Oops, try again. It looks like the o key isn't opening a description. Remember to toggle the current article's description inside the event handler. Look back at the instructions for the code."

var main = function() {
$('.article').click(function() {
$(document).keypress(function(event) {
if (event.which === 111) {
$('.current').children('.description').toggle();
};
});
$('.description').hide();
$(this).children('.description').show();
$(this).addClass('current');
$('.description').hide();
$('.article').removeClass('current');
});
};

$(document).ready(main);


#2

1

You pasted-in your document =keypress= Eventhandler

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

in the middle of your article =click= Eventhandler.

2

In your article =click= Eventhandler
you will have to change the order in which you wrote your statement's

  • hide all description's
  • remove the current - class from all article's
  • on just =click=ed HTML-element, identified by this
    -- show the description of this
    -- set the current class on this

#3

Final correct code looked like this:

"var main = function() {
$('.article').click(function() {
$('.description').hide();
$(this).children('.description').show();
$(this).addClass('current');
$('.description').hide();
$('.article').removeClass('current');
});
$(document).keypress(function(event) {
if (event.which === 111) {
$('.current').children('.description').toggle();
}
});
};

$(document).ready(main);"

However, although this code passes it does not appear to allow the user to select items in the newsreader. Could you perhaps suggest why this is?


#4

In your article =click= Eventhandler
you are

  • hide, then show, then hide the description
  • you set the =current=-Class on the =clicked=-article, then remove the =current=-Class from all-articles !!

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

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.

\==================================
$('.description').show(); Class "description" and show them...you will see all 7 Articles with their description shown.

$('.current').children('.item').hide().children('.description').show()
step 1 , hide the Article-line using the ".item" Class as sub-selection
step 2 , show the Children Elements of the Parent with Class "description"

\==================================
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]

#5

Thanks for the extremely detailed reply and for one of the best visual representations of the DOM I've seen in ages! I have an appointment soon, but once that's over I'll have a look through the code, go back to the exercise and see what stuff needs to be groked from your extremely exhaustive answer!