Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kenn Hyatt
9,683 PointsA review of a personal project I'm working on
Enclosed here is a personal project of mine that is helping me improve my Jquery skills.
The script I have written works, however, I am sure there is a better way to write it. I am especially concerned about the series of add and remove classes I have in the hover states.
I want to be able to write one line for adding the classes and one for removing classes, and using variables to differentiating between the buttons.
The project is very straight forward and am looking for open, honest critique
http://codepen.io/comfychair/pen/vERqep
Thanks
4 Answers

Robert Richey
Courses Plus Student 16,352 PointsHi Kenn,
Thanks for sharing. I made some changes I think you'll like. Below is the entire JS file. Here is the forked Codepen.
var box = document.getElementsByClassName("navInfo");
$("button").mouseenter(function(e) {
$(box).append(e.target.id);
$('.navInfo').wrapInner( $("<p></p>"));
$(box).addClass("glyphicon glyphicon-"+e.target.id);
}).mouseleave(function(e) {
$('.row > .navInfo > p').detach();
$(box).removeClass("glyphicon glyphicon-"+e.target.id);
});
Unfortunately, the glyphicon for sign no longer works because it's class name is glyphicon-info-sign
. I'll leave that up to you how to fix this. There is likely an even better way to go about this - but, sub-optimal working code is always better than optimized, broken code (though, I guess this is now broken code with sign no longer working!)
I hope this helps in some way.
Cheers!

Kenn Hyatt
9,683 PointsGood Show Robert!
That was exactly what I was looking for! I keep seeing people use 'e' as variable passed into that function, what does it stand for in this situation? Is that what a 'this' keyword would refer to if I were using it?
Again, Thanks Robert, this is awesome, I can learn much from this

Robert Richey
Courses Plus Student 16,352 PointsThe e
in this context is information about the event that is being passed along and made available to your function call-back. Some developers call it evt
or literally event
or me
for mouse event, and you can call methods and get property values from it.
I had to fix the sign bug, so here is the updated Codepen.
var box = document.getElementsByClassName("navInfo");
var elementId = "";
$("button").mouseenter(function(e) {
elementId = e.target.id;
if (elementId == "sign") {
elementId = "info-sign";
}
$(box).append(e.target.id);
$('.navInfo').wrapInner( $("<p></p>"));
$(box).addClass("glyphicon glyphicon-"+elementId);
}).mouseleave(function(e) {
$('.row > .navInfo > p').detach();
$(box).removeClass("glyphicon glyphicon-"+elementId);
});

Robert Richey
Courses Plus Student 16,352 PointsI made one final change to the Codepen script, and that is to console.log(e)
on the mouseenter event. If you want to see what all information is available from the e
variable, open up the dev console (F12 on windows) and make sure console tab is open - mouse over a box, and you'll see an expandable n.Event
appear. This is actually the first time I've done this, and I'm amazed by how much information is available is that event object.
Cheers!

Kenn Hyatt
9,683 PointsThats perfect Robert,
A lot of great information here I cant imagine the code getting any cleaner than this!
regards,
Kenn

Kenn Hyatt
9,683 PointsFor anyone still following this project, I've made some more changes:
http://codepen.io/comfychair/pen/vERqep
I have noticed a minor intermittent problem. It seems like the hover state for the buttons on the right hand side randomly does not want to work. Seeing as how its random, I don't know how to start troubleshoot the issue. It seems to me it may have something to do with the browser not being quick enough? Maybe I need a wait timer on it?