9. The n shortcut 2


#1

Hi all... could someone explain what's going wrong? Thanks :smiley:

SyntaxError: Unexpected keyword 'else'
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.

    var main = function() {
        $(document).keypress(function() {
            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');
            };
        });
        $('.article').click(function(event) {
            $('.article').removeClass('.current'); 
            $('.description').hide();
            $(this).addClass('.current');
            $(this).children('.description').show();
        });
    };

$(document).ready(main);

#2

@pauyeung,

-1

You are using a semi-colon-; in your IF ELSE-IF statement

        if(event.which === 111) {
            $('.current').children('description').toggle();
        };

A semi-colon-; is seen by the Javascript-Interpreter as an End-of-Statement indicator
causing the IF statement seen to be ENDED,
and therefore the Javascript Interpreter does NOT expect a following ELSE of ELSE-IF.

-2

You also have to look at your usage of the jQuery addClass() and removeClass() Methods.

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

@leonhard_wettengmx_n

Thanks for the detailed explanation!


#4

I resolved it like this:

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