add/remove the class... that certainly is *not* the case as your code
wires up the <div>'s to their respective events one single time, on
document.ready
if you want to change the events on the fly, use the ".live"
version.... or better yet, generalize the function so it's the same
function no matter which class it is
$("div.large, div.small").click(function() {
if ($(this).hasClass("large")) {
$(this).removeClass("large").addClass("small");
}
else { //Has class cmall
$(this).removeClass("small").addClass("large");
}
return false; //uneeded since <div>'s have no default event
});
On Feb 25, 10:53 am, Larry <malariasta...@gmail.com> wrote:
> 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>
No comments:
Post a Comment