O&n shortcut?


#1

Hello! I've been having some problems with the o & n shortcut - the exercise let me go on with the exercise even if the code didn't actually work? even when i pressed o nothing happened but apparently the code was good enough? but now i'm stuck on the n shortcut exercise and i get this message: "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."
I probably made a very dumb mistake but if you could point out what I'm doing wrong I'd be really grateful!!

var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();

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

$(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);


#2

Hi Grazia,

You need to close your main function with a closing curly brace (}) on the next to last line :slightly_smiling:


#4

@gra_elle,

+++++ 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"

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
http://www.w3schools.com/jquery/trysel.asp


#5

@gra_elle,
The structure of your =main= function should look like

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

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

#6

@zystvan @leonhard.wettengmx.n it's working now! thank you both :smile: