Wrong Error? (Refreshing the site doesn't help)


#1



Hey Guys,

I got stuck on this exercise... It says that I got something wrong, even if I ain't got it wrong (since it works in the 'live-view').
Neither refreshing the page, nor resetting the code helps me to proceed.

What did I do wrong?

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


Oops, try again. Add the line $('.description'); inside your $('.article').click() function.


var main = function() {
    $(".article").click(function() {
        $(".description").hide();
        $(this).children(".description").show();
    });
}

$(document).ready(main);


#2

@0xb4dc0ded
As you can see in the Oops-message
the course-checker is expecting you to use the single-quotes-' '
instead of the double-quotes-" " which you are using....


#3

Hello @leonhard.wettengmx.n,

Yes, that was the problem... I just wondered myself,
cause until this time it accepted it both ways (" .. " and ' ... ')

Thanks for your advice!


#4

@0xb4dc0ded

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'); <select all 7 Elements with Class "article" & remove the _attribute_ **class=current** from all those Elements.

$('.description').hide(); <select all 7 Elements with Class "description" & hide those Elements.

$(this).addClass('current'); <select the Element you just clicked-on, usingthisas 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(); <select the'_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(); <select all 7 Elements with the _Class_ "description" and _show_ them...you will see all 7 Articles with their description shown.

$('.current').children('.item').hide().children('.description').show()
<select the current Article and ALL it member Elements
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"

\==================================
http://www.codecademy.com/forum_questions/546b3ce952f8632fb6001b20
news reader compilation == http://www.codecademy.com/forum_questions/5488c6049376766b1b00056e


#5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.