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
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsTrying to loop options so only certain ones show.
In the unit 3 project, I have to only show a certain amount of colors of a shirt based on the design on a shirt, I was able to loop through the first shirt by looping through all of them and hiding the last 3 colors and it worked, now I need to show the first 3 colors and I'm kind of confused on how to do that. I'm looping though the length of the options and just using the hide method to only show the first 3. I dont think the same loop is going to work to show the last 3 and hide the first. Any idea on what I can do. I've tried a couple ideas and they havent worked.
$("#design").change(e => {
//need to find a way to make sure first click is one or the other design
if (e.target.value === "js puns") {
//load correct color for js puns
for (let i = 3; i < colorChildren.length; i++) {
const hiddenShirts = colorChildren[i];
$(hiddenShirts).hide();
}
}
if (e.target.value === "heart js") {
console.log("heart js");
//load correct color for js puns
for (let i = 0; i < colorChildren.length; i++) {
const showShirts = colorChildren[i];
if (i > 3) {
$(showShirts).show();
}
}
}
});
Steven Parker
231,269 PointsBy using "each" instead of a loop, jQuery sets the value of "this" to every element in the collection (one at a time). So yes, it's a more compact equivalent to colorChildren[i].
Good news on having it working!
Happy coding!
1 Answer
Steven Parker
231,269 PointsThe hide the others, just add an "else" statement to your "if":
if (i > 3) {
$(showShirts).show(); // show those wanted
} else {
$(showShirts).hide(); // hide all the others
}
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsI just tried that and the color drop down doesnt automatically change based on the design of the shirt. Also when i do change the design of the shirt, the color drop down gets stuck and wont show any shirts at all.
Steven Parker
231,269 PointsIt would help to see all the code. Can you make a snapshot of your workspace and post the link to it here?
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsHeres the git hub link to the javascript file: https://github.com/joeEscob1023/interactiveForm/blob/master/js/app.js
Steven Parker
231,269 PointsI wasn't able to replicate the "stuck" situation. If you still have that issue, perhaps you could tell me the step-by-step control changes that lead to it.
But there isn't any code to change the current color selection with a design change, only to change what selections are available to choose. And that part seemed to work OK. You can easily add a line to select one of the valid choices when the design is changed:
// show correct colors for "heart js"
colorChildren.each(function(i) {
if (i > 2) $(this).show();
else $(this).hide();
});
// AND pick one as a default selection
$("#color").val("tomato");
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsJoseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsThank you! that worked, and then i just changed the js puns if statement to make sure it works as well. Question about your code though, I logged what 'this' was and its giving me the options in the drop down. In this situation, is 'this' the same as colorChildren[i]?