Below is my complete page. I have two divs, one with class 'large' and
one with class 'small'. When you click on the div with the 'small'
class, I want to change it to 'large' and vice versa. The classes seem
to change as I alert() the small or large class values and they seem
correct BUT the div seems to stay bound to the original click function
even though the div should/does not have the small class anymore,
the .small.clcik event is getting called. Any help would be
appreciated. I am sure I am missign something real easy!?
Thank you, Larry
<html>
<head>
<style type="text/css">
.large { font-size:36px; }
.small { font-size:16px; }
</style>
<title>jQuery Class Add/Remove Test</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.large').click(function(){
alert(".large.click()");
alert("large (should be true) = " +
$(this).hasClass("large"));
alert("small (should be false) = " +
$(this).hasClass("small"));
$(this).removeClass("large");
$(this).addClass("small");
$(this).html("I am now small - click to make
large");
return false;
});
$('.small').click(function(){
alert(".small.click()");
alert("large (should be false) = " +
$(this).hasClass("large"));
alert("small (should be true) = " +
$(this).hasClass("small"));
$(this).removeClass("small");
$(this).addClass("large");
$(this).html("I am now large - click to make
small");
return false;
});
});
</script>
</head>
<body>
<div id="div1" class="large">I am large - click to make
small</div>
<div id="div2" class="small">I am small - click to make
large</div>
</body>
</html>
