Jump to content

Recommended Posts

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 by Bridge Boy
Link to comment
Share on other sites

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 :) 

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...