N shortcut not working


#1

I can't see why it's not working.

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

Your code is not working because of syntax errors, the logic of the code is fine. The syntax error has to do with the .removeClass() and .addClass() methods.

With both of those methods you actually leave out the period when declaring the class you are adding or removing, e.g. $(this).addClass("isHow").removeClass("you-use-these-methods").

I got thrown off by this too when going through this exercise and had to search for the answer.


#3

@frdsh, @tjc0090,

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


#4

@leonhard_wettengmx_n Please help look at my code below. for some reason it just doesn't work even after using the suggestions.

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


#5

@donjoky,
the structure of our main-function looks like:

var main = function() {
     //BEGIN of main function-body 
    //
    //The CLICK event-handler is

    $('.article').click(function() {

     });

     //now comes the KEYPRESS event-handler

     $(document).keypress(function(event) {

       });
   //END of main function-body
   };

  $(document).ready(main);

#====================

$('.article').click(function(){
      $('.article').removeClass('current');
      $('.description').hide(); 
      $(this).addClass('current');
      $(this).children('.description').show();
 });

#6

Wow!
Many thanks. That sorted it out :smile:


#7

A post was split to a new topic: I need a help with this..Where is my mistake?