jQuery multiple class selection
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 attribute '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
开发者_如何学GoWhen one of the buttons with class attribute 'grp2' is clicked on (note: it has to be 'enabled' first), I disable all 'buttons' in that group (i.e. remove the 'enabled' class for all elements with class 'grp2' (should probably selecting for elements with class 'button grp2' 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 behavior is still applied to these elements (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)
You could attach hover listener to all buttons, and then check at runtime, whether the particular button has class enabled.
$(".button").hover(function(){
if ($(this).hasClass('enabled')) {
$(this).addClass('button-hover');
}
}, function() {
$(this).removeClass('button-hover');
});
All your initialization code (i.e. setting the functions) is done in $(document).ready() function. The hover and click functions get set based on the classes on the elements at that time.
As hover isn't actually an event - it is a helper handling the onmouseover and onmouseout events - to remove the hover behaviour you need to unbind those function, like so
$('.grp2.enabled').click(function() {
$(".grp2").removeClass('enabled');
$(".grp2").unbind('onmouseover').unbind('onmouseout');
}
If you want to re-enable (some of) the buttons, you should use the .hover() helper with those elements also when enabling the buttons.
$.each(<collection_of_enabled_elements>, function() {
this.hover(
function() {
$(this).toggleClass('button-hover');
},
function() {
$(this).toggleClass('button-hover');
}
)
});
When applying a event handler to an element, then the handler is applied to the element independent on what conditions you use to find/select this element. Its not a "rule" saying: when ever a button is enabled then apply the hover handler, but a "command" saying all buttons which are now "enabled" will get this hover handler now (and keep it unless you remove it).
Unless you need something else to happen other than applying different style while hovering, I'd suggest you use CSS for the hovering:
<style type="text/css">
.button.enabled:hover {
background-color: blue;
}
</style>
Also, is there any special reason you are using spans instead of "real" buttons? You could use their "built in" ability to disable.
加载中,请稍侯......
精彩评论