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
john larson
16,594 PointsI'm a little (a lot) foggy on how this code is making the text in the menu bar change
if($anchor.parent().hasClass("selected")){
$option.prop("selected", true);
};
it looks like it's saying that is the parent element has the class selected then it's property will be true. But isn't it already true if it has that class? (I get that .selected and selected true are separate
things) I don't see how this changes the text in the menu bar.
Here's the rest of the code.
var $select = $("<select></select>"); /* create select */
$("#menu").append($select); /* append select */
$("#menu a").each(function(){ /* iterate over a */
var $anchor = $(this); /* store a */
var $option = $("<option></option>"); /* create option in fn */
if($anchor.parent().hasClass("selected")){
$option.prop("selected", true);
};
$option.val($anchor.attr("href")); /* set option val, href of a */
$option.text($anchor.text()); /* option text = a text */
$select.append($option); /* add option to select */
});
$button = $("<button>Go</button>"); /* create button */
$("#menu").append($button); /* add button */
$($button).click(function(){ /* bind click */
window.location = $select.val(); /* set win local w/ select val */
})
//html
// <div id="menu">
// <ul>
// <li class="selected"><a href="index.html">Home</a></li>
// <li><a href="about.html">About</a></li>
// <li><a href="contact.html">Contact</a></li>
// <li><a href="support.html">Support</a></li>
// <li><a href="faqs.html">FAQs</a></li>
// <li><a href="events.html">Events</a></li>
// </ul>
//
// </div>
//select menu we dynamically add in
// <select>
// <option value="index.html">Home</option>
// <option value="about.html">about</option>
// <option value="contact.html">contact</option>
// <option value="support.html">support</option>
// <option value="faqs.html">faqs</option>
// <option value="events.html">events</option>
// </select>
3 Answers
John Coolidge
12,614 PointsIf you rewatch the video from about 11:20 onward you'll see that Andrew explains when you use the select box to traverse to a new page, say the About page for example, without the addition of the above code snippet, the select box will show the word "Home" in it even tho you are not on the Home page. The code above will turn the selected property to true in order that the select box show the name of the page you are on. Try and take out that bit of code and traverse from page to page. You'll notice that the select box will always say "Home" on the top. Now add that bit of code in again and traverse from page to page. Now the page title will only say "Home" when you're on the home page and it will say "About" when you're on the about page, etc.
When you move from page to page with the browser maximized, you'll notice the background color of the <li> change when you click on Home or About or FAQ. That's because the JavaScript has the "selected" class added to the new <li> that corresponds with the page you are on (and the CSS changes the background accordingly). What that bit of code above does is keep tabs on that "selected" class attached to the list of <li> tags. When the "selected" class moves from Home to About, that code snippet will move the option tag's selected property to match the <li> class's movement. In this case, Home option's selected property will become false/return to default and the About option's selected property will become true.
Does that make more sense?
John Coolidge
12,614 PointsJohn Larson,
You are correct, there should only be one <li> with the class "selected". I don't have my own work in front of me at the moment, but if I recall, when you set an option's selected property to true, you are asking that that option value be displayed in the select tag. It isn't going to change the text at all. It's just showing that option in the select tag so that your site visitors can see what page they are currently on. Otherwise they have to use the content of the current page to guess. They might have selected the wrong choice by accident and assume they're on the FAQ page when they accidently selected the About page (and then assume that you don't know how to put together a proper FAQ page).
I hope that's clear and makes sense. If not, please let me know.
John
john larson
16,594 PointsThis line of code (I'm pretty sure) is the one that makes the menu bar show the right text for the page. Though based on your answer (which I may or may not understand) I don't see how that is happening.
if($anchor.parent().hasClass("selected")){
$option.prop("selected", true);
};
john larson
16,594 PointsIt's ever so slightly less foggy. Thanks for your help. I found this: 'that bit of code above does is keep tabs on that "selected" class attached to the list of <li> tags. When the "selected" class moves from Home to About, that code snippet will move the option tag's selected property to match the <li> class's movement".; Particularly enlightening. Sometimes Andrew says stuff and I don't quite get it. I don't recall that bit of logic from the video (I watched that part several times). So the way you presented it here...just clicked. Thanks.
john larson
16,594 Pointsjohn larson
16,594 PointsThinking about how to ask the question better. In the html, only one li has the class selected. So wouldn't the code
only be TRUE for that one element? But it changes the text for all the options.