The n shortcut 2


#1

Hello!
Can someone help me?
I checked even with the forum, my code looks like not being wrong but this error appears:
"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."

this is my code:

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').toogle();
}

else if(event.which === 110) {
    var currentArticle = $('.current');
    var nextArticle = currentArticle.next();

    currentArticle.removeClass('current');
    nextArticle.addClass('current');
    };

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

Thanks
Silvestro


#2

@silvestrovicino,

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

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS

Some reference-material:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page


#3

@silvestrovicino,

Have a close look at

removeClass('.current');

addClass('.current');

.toogle();

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

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

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

#4

@leonhard.wettengmx.n

Really thanks for the quick reply.

Where have I to add ".toggle();?

Thanks


#5

whit this code I have this error: 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.

CODE++

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').toogle();
}

else if(event.which === 110) {
    var currentArticle = $('.current');
    var nextArticle = currentArticle.next();

    currentArticle.removeClass('.current');
    nextArticle.addClass('.current');
    };

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


#6

@silvestrovicino,

1

Thus you have to change
$('.article').removeClass('.current')
$(this).addClass('.current')**
into
$('.article').removeClass('current')
$(this).addClass('current')**

2

You will have to modify your toogle() into toggle()

3

You will have to add a closing curly-bracket-}
to close the =main= FUNCTION-BODY


#7

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


#8

It does not work, yet. :sweat:


#9

@silvestrovicino,
Are you reading the p o s t s.....?????????

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

#10

@leonhard.wettengmx.n
Thanks!


#11

@silvestrovicino,

google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com

== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com

== guidance ==
www.crockford.com
[your question] site:crockford.com
- - http://javascript.crockford.com/code.html << Javascript coding convention
- - http://javascript.crockford.com/survey.html

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
http://www.w3schools.com/jquery/trysel.asp
http://www.w3schools.com/jquery/jquery_ref_selectors.asp