I am a bit confused with this:
I have a page with a set of buttons (i.e. elements with
class attribute 'button'. The buttons belong to one of two classes (grp1 and grp2).
These are my requirements
For buttons with
class enabled, when the mouse hovers over them, a 'button-hover'
class is added to them (i.e. the element the mouse is hovering over). Otherwise, the hover event is ignored
When one of the buttons with
class grp2 is clicked on (it has to be 'enabled' first), then I disable (i.e. remove the 'enabled'
class for all elements with
class 'enabled' (should probably selecting for elements with
class 'button' AND 'enabled' - but I am having enough problems as it is, so I need to keep things simple for now).
This is what my page looks like:
<html>
<head>
<title>Demo</title>
<style type="text/css"
.button {border: 1px solid gray; color: gray}
.enabled {border: 1px solid red; color: red}
.button-hover {background-color: blue; }
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="btn-cntnr">
<span class="grp1 button enabled">button 1</span>
<span class="grp2 button enabled">button 2</span>
<span class="grp2 button enabled">button 3</span>
<span class="grp2 button enabled">button 4</span>
</div>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".button.enabled").hover(function(){
$(this).toggleClass('button-hover');
}, function() {
$(this).toggleClass('button-hover');
});
$('.grp2.enabled').click(function(){ $(".grp2").removeClass('enabled');}
});
/* ]]> */
</script>
</body>
</html>
Currently, when a button with
class 'grp2' is clicked on, the other elements with
class 'grp2' have the 'enabled'
class removed (works correctly).
HOWEVER, I notice that even though the
class no longer have a 'enabled'
class, SOMEHOW, the hover behaviour is still applied to these elemets (WRONG). Once an element has been 'disabled', I no longer want it to respond to the hover() event.
How may I implement this behavior, and what is wrong with the code above (i.e. why is it not working? (I am still learning jQuery)
