Please help. I don't understand this one. On line 8 of app.js, remove the class of selected from the siblings.

Question

On line 8 of app.js, remove the class of selected from the siblings.

js/app.js

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");

//When clicking on control list items
$(".controls li").click(function(){
  //Deselect sibling elements
  $(this).siblings();
  //Select clicked element
  $(this);
  //cache current color
  color = $(this).css("background-color");
});

//When new color is pressed
  //Show color select or hide the color select

//When color sliders change
  //update the new color span

//When add color is pressed
  //Append the color to the controls ul
  //Select the new color

//On mouse events on the canvas
  //Draw lines

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Drawing Application</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <div class="controls">
        <ul>
            <li class="red selected"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
        </ul>
        <button id="revealColorSelect">New Color</button>
        <div id="colorSelect">
            <span id="newColor"></span>
            <div class="sliders">
                <p>
                    <label for="red">Red</label>
                    <input id="red" name="red" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="green">Green</label>
                    <input id="green" name="green" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="blue">Blue</label>
                    <input id="blue" name="blue" type="range" min=0 max=255 value=0>
                </p>
            </div>
            <div>
            <button id="addNewColor">Add Color</button>
            </div>
        </div>
    </div>
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>    
</body>
</html>

Answer 1 · 2016-03-21T02:43:33Z

March 21, 2016 2:43am

Note that the one of the li in the html has the class="selected".

This step is to remove this class from all siblings before reapplying it to the correctly selected one.

This can be done with the .removeClass() function like so.

var color = $(".selected").css("background-color");

//When clicking on control list items
$(".controls li").click(function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this);
  //cache current color
  color = $(this).css("background-color");
});

Hope this helps

Welcome to the Treehouse Community

Looking to learn something new?

Jennifer Griffin

Jennifer Griffin

Please help. I don't understand this one. On line 8 of app.js, remove the class of selected from the siblings.

1 Answer

Billy Bellchambers

Billy Bellchambers

Jennifer Griffin

Jennifer Griffin

Billy Bellchambers

Billy Bellchambers