The n shortcut 2- translation needed


#1

Hello,

I don't understand what I'm being asked to do and therefore don't understand where to put the code. Can some patient person help me understand what I'm supposed to do?

Here's what is required:
1. Select the current article using the '.current' selector. Save this in a new variable named currentArticle
2. Select the next article using currentArticle.next(). Save this in a new variable named nextArticle
3. Remove the 'current' class from currentArticle using .removeClass()
4. Add the 'current' class to nextArticle using .addClass()
5. Click on any article, and then press the n key to see your new shortcut!

Here's the error message I get:
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.

Here's what I have:

var main = 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'); // ?? Is this 3. Remove the 'current' class from currentArticle using .removeClass() ??//
        nextArticle.addClass('current');// ?? Is this 4. Add the 'current' class to nextArticle using .addClass() ??//
        }

$('.article').click(function)(){
$('article').removeClass()
$('.description').hide()

$(this).addClass('current');   
   $(this).children('description').show();

});
};
$(document).ready(main);

Thanks in advance for any help.


#2

@julienk403,

+++++ addClass removeClass

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with

 <div class="myClass1 myClass2 myClass3" ></div>

you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.
You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name.
Thus you have to change
**$('.article').removeClass('.current')
$(this).addClass('.current')**
into
**$('.article').removeClass('current')
$(this).addClass('current')**

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .current,
In this .current object
the background property-key is set to a particular VALUE

jQuery uses the same syntax to identify a class-attribute
like in the jQuery-selector
$(".current") by which this HTML-Element and all it's CHILDREN
are selected into a jQuery-object,

This parent-HTML-Element carries the class-attribute with class-name "current"


#3

@julienk403,

Compilation of News Reader (2016-02-02)
http://discuss.codecademy.com/t/help-me-on-o-shortcut/25483/2?u=leonhard.wettengmx.n


#4

Thank you so much for taking the time to fully explain this to me. I sincerely appreciate it.