Question

I’m a total noob struggling so hard to learn jquery and javascript. I think I have a very hard goal for this code and need help bad. I’ve spent 15+ hours trying to figure this out but still don’t see the solution.

Here is my example code:

<div class="daddy">

  <div id="reset" onclick="changeAllFatsToSkinny">reset</div>

  <div class="skinny baby" onclick="weightChange(event)">Button01</div>
  <div class="fat baby" onclick="weightChange(event)">Button03</div>

  <div id="random" class="no class here">random text</div>

</div>

Goal: The click event “weightChange” changes the div class from the default “skinny baby” to “fat baby”. I have the following code working…

function weightChange (event) {
var element = event.currentTarget;
element.className = (element.className == 'skinny baby') ? 'fat baby' : 'skinny baby';
}

This code may be overkill but it is working for now. The problem is that I can’t figure out how to find and replace the class “fat baby” back to “skinny baby” in all the children of the div “daddy” by clicking on the “reset” div. I got it to work somewhat but it changed the class on ALL divs including “random” divs.

I have looked at a bunch of jquery code and think I need to string together the

.find()
.hasClass()
.removeClass()
.addClass() or maybe just toggleClass()

to do all this. I think I need some kind of “if then” statement too. My problem is that I don’t know enough Javascript to get the syntax right. I suck and I am very sad because of this problem. Please, ow please help me!? Thank you greatly in advance.

P.S. I honestly need someone to write out the solution for me because I have tried so much to piece together several demo examples without getting the desired results. I don’t really even understand how to make a click event yet. I have been reduced to an infant by this problem. Sorry.

Answer 1

Here’s the code you are looking for:

$('#reset').click(function(){
    $('.daddy .baby').removeClass('fat').addClass('skinny');
});

---

You claim to be using jQuery, but you are not utilizing it in your code at all.

You can rewrite your code as follows:

$('.baby').click(function(){
    $(this).toggleClass('fat skinny');
});

There’s absolutely no need for inline javascript.

Here’s the Fiddle: http://jsfiddle.net/MLHDh/