Elithanathile he/him Posted June 20, 2017 Report Share Posted June 20, 2017 (edited) So I've been taking a coding course recently and when I get code that I don't understand what's wrong with it, I naturally turned to the awesome people on the 17S Discord server. From there I was advised to start a thread on here. So after looking around, I didn't see a thread that was related to helping out with programming help. So I figured I would start this, and if people either need help or are willing to give it, they could (hopefully) come here. So that's pretty general, but hopefully it works out. Recently I've been trying to figure out jQuery, and to test it I have a bunch of checkboxes and radiobuttons. I'm trying to get it so that one is selected, the background turns a different color. I have the html and the css all set up, so I think it's a problem with the code. $('.left, .computers input').click(function(){$(this).parent('.input').toggleClass("formfocus");}); The code isn't inside a (document).ready, but it is inside a <script> element at the end of the <body>. So I was hoping some of you guys who are more experienced with jQuery could tell me what I did wrong. Debuggers haven't been able to help and the tags are all proper, so I'm pretty stuck right now. Edited June 20, 2017 by Bridge Boy 0 Quote Link to comment Share on other sites More sharing options...
Mestiv he/him Posted June 20, 2017 Report Share Posted June 20, 2017 Ok, let's analyze it line by line: $('.left, .computers input').click(function(){ Here you're registering a callback that will be executed every time you click on something. On what? On everything that has class "left" AND every <input> element that's somewhere inside an element with class "computers". Next line: $(this).parent('.input').toggleClass("formfocus"); Here, you take $(this) - the element that was clicked. Look for it's parent that has class "input" and toggle it's class "formfocus". Now, I see three things here: 1. I doubt it that you're looking for an element with class "input", more likely you're just looking for <input> element, so $(this).parent('input') maybe is better? 2. Do you really want to modify the parent element of the element that was clicked or the element itself? 3. Are you sure you want to look only one level higher for the "input" element? There is a big difference between parent() and parents() in jQuery. I guess you actually just want the .parent() of the checkbox or radio box. Now, I don't know how to exactly fix your code as I don't know the HTML that goes with it, but I'll say two things: 1. alert() and console.log() are your precious debugging tools. Use them a lot to see what's going on, before you'll learn how to use breakpoints in the developer tools. 2. Here's my approach to what you're trying to do: https://jsfiddle.net/h43d93ht/ 3. Learn to use jsfiddle (the page I used). This will greatly help you communicate your JS problems with any community willing to help 3 Quote Link to comment Share on other sites More sharing options...
Elithanathile he/him Posted June 20, 2017 Author Report Share Posted June 20, 2017 The comma makes it an and? I thought it just made it more specific. I have tried it with just the .left and it still didn't do anything. I do actually have elements with the .input class, the <p> holding the input. Cause I don't want just the little button, but the entire line to be highlighted. I did want multiple levels higher, and didn't know that the .parents identifier existed. And yeah, just switched that to .parents and it worked. I knew it was something obvious! I think I've found jfiddle before, but didn't know that it worked with jQuery as well, so I'll use it more. Thanks for the assistance! 0 Quote Link to comment Share on other sites More sharing options...
Retsam Posted June 21, 2017 Report Share Posted June 21, 2017 @Bridge Boy For practice on CSS selectors, CSS Diner is a nice little game that's helpful for learning or reviewing CSS selectors. It represents HTML as a table with various things dishes and fruits on it, and you need to write the correct CSS selector to pick various things. 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.