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.
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/
精彩评论