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! While you're at it, check out some resources Treehouse students have shared here.

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

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 1

Posted by M Fen
M Fen
9,858 Points

Why does this work?

//store the color because we'll probably want to use the mouse events
var color = $($rgbColor).css("background-color");
//store the control class and li element as an object
var $rgbColor = $(".controls li");
//When clicking on control list items
$($rgbColor).click(function() {
  //Deselect sibling elements
  $($rgbColor).removeClass( "selected" );

  //Select clicked element
  $(this).addClass( "selected" );
  //cache current color
  color = $(this).css("background-color");
});

I tried to tackle this project outside of the video. I got stuck on the mouse draw so I had to come back.

I do find it weird that I didn't have to use the .sibling() on the removeClass inside the click function and my selection still works. Why is that?

1 Answer

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hi M Fen! I think its because you are selecting the actual button so that's why you use $(this) ...You are not selecting any sibling of that particularly button but the button itself! You are in the first step using the var $rgbColor which selects the .controls li elements and using removeClass() to remove a class from ALL of them included the button you just clicked. Then you are using $(this) to select the button you clicked and the .addClass() to add a class to that button only.

Hope it helps you understand! And that my eng isn't THAT painful to read XD!

Cheers and Keep Coding!