jQuery Project (Gameboard)


#1


https://www.codecademy.com/courses/jquery-ext/projects/jquery-prj_gameboard

Help! The code has no effect! What's wrong? Any hints/tips?


var main = function() {
  $('.more-btn').click(function() {
    $('.more-menu').next();
  });
  $('.share').click(function() {
    $('.share-menu').toggle();
  });
  $('.notification glyphicon glyphicon-bell').click(function() {
    $('.active').toggle();
  });
};

$(document).ready(main);


#2

This is the desired result from steps 2 thru 4

Not sure how well you know jQuery, given the indications from above. Where to begin? Let's talk about each step, 2 to 4.

Given the very nature of jQuery, the style sheet is our best reference, apart from the HTML itself. It is chalk full of clues.


#3

Hi mtf and thanx for trying to help!

I'm aware of the desired result and have achieved it in previous projects but just can't do so in this one


#4

In a step by step version, we have three listeners we need to set up. '.more-btn' and '.share' are two of them.

The third, according to the above is undefinable. It has a descendent selector that targets unknown HTML element nodes since there are two type selectors of unkonwn type. May I suggest take some time to examine selectors in CSS so jQuery makes more sense. It will be time well spent.

What we need is a selector that targets the notification class. The other classes are extraneous to the general concern... Targeting. We have our target, and don't need them.

Okay, so now we have registered three event listeners, we need to define their handler functions. We're into the second layer of this program. The action layer. Where do we begin?


#5

Don't be snake-bitten. We hit walls all the time. It's the nature of programming at any level. Walls are there, and we hit them. That is never a reason to back off. We hit walls for a reason. It's really poetic when we think about it. "Then, I would have seen it as a child; now I see it in a glass, darkly."

The solution to this is reading. Go to jQuery's site, and MDN and SitePoint and a host of other really reliable sites. Don't forget to have W3C.org and all their tentacles bookmarked. If you're serious you'll know their site inside out by the time you graduate.


#6

Phew ...... after a lotta sweating I came up with this which works:

var main = function() {
  $('.more-btn').click(function() {
    $('.more-menu').toggle().next();
  });
  $('.share').click(function() {
    $('.share-menu').toggle();
  });
  $('.notification').click(function() {
    $(this).toggleClass('active');
  });
};

$(document).ready(main);

What do you think? Thanks for the reading tips @mtf


#7

I think the .next() is not needed. You are toggling the whole list, which means showing the parent UL.

$('.more-menu').toggle();

Glad you found the toggleClass method.


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.