CODEWITHSUNDEEP
jquery
morpheous
morpheous

Reputation: 16926

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

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)

Upvotes: 0

Views: 460

Answers (3)

Jawa
Jawa

Reputation: 2332

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');
    }
  )
});

Upvotes: 1

Tatjana N.
Tatjana N.

Reputation: 6225

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');
});

Upvotes: 1

RoToRa
RoToRa

Reputation: 38390

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.

Upvotes: 0

Related Questions