Using ToggleClass For Both Buttons - Issue With $(this) Jquery Object

Question

I would like to make flip colors of 2 buttons when mouse is over on one of them. I have the following HTML :

Solution 1:

Since the same function can function as handlerIn and handlerOut, there is no need to pass the same function as the second parameter to the .hover method. Refer this for jQuery .hover specification.

Check this code snippet. May be this is the behavior you are looking for.
When the mouse is over a button, it toggles.
When the mouse moves out of the button, it toggles back to the original style.

In your html, the class name is misspelled as btn-clssic. <button type="button" class="btn btn-clssic btn-xs">Computer</button>

The correction required in your code is

   playerVsComputerContainer.hover(function() {                                          
                   $(this).toggleClass('btn-inverse');                                   
                   $(this).toggleClass('btn-classic');                                   
   });

This can be simplified as following.

playerVsComputerContainer.hover(function() {                                          
                       $(this).toggleClass('btn-inverse btn-classic');                                   
       });

Refer this for jQuery toggleClass specification.

Baca Juga

$('#PlayerVsComputer .btn').hover(toggle);
   
   function toggle() {
    $(this).toggleClass('btn-inverse btn-classic');
   }

.btn-classic {
  color: black;
  background-color: white;
}

.btn-inverse {
  color: white;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="PlayerVsComputer" class="checkbox">
  <label><input type="checkbox" class="game">                                        
   <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-inverse btn-xs">Player</button>             
    <button type="button" class="btn btn-classic btn-xs">Computer</button>            
   </div>
  </label>
</div>

<div id="Player1VsPlayer2" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player 1</button>           
    <button type="button" class="btn btn-classic btn-xs">Player 2</button>                       
   </div>
  </label>
</div>

Solution 2:

If I understand correctly, I need to change the color of the button when hovering over it. this code uses 2 functions. one is performed when you hover over any button with the class .btn, the other when you remove the focus from the button.

$('.btn').hover(
  function() {
    $(this).addClass('btn-classic');
  },
  function() {
    $(this).removeClass('btn-classic');
  }
);

.btn-inverse {
  color: white;
  background-color: black;                                                               
  }
  .btn-classic {
  color: black;
  background-color: white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="PlayerVsComputer" class="checkbox">                                        
  <label><input type="checkbox" class="game">                                        
   <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-inverse btn-xs">Player</button>             
    <button type="button" class="btn btn-clssic btn-xs">Computer</button>            
   </div>
  </label>
 </div>

 <div id="Player1VsPlayer2" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player 1</button>           
    <button type="button" class="btn btn-xs">Player 2</button>                       
   </div>
  </label>
 </div>

javascript spravka

Using ToggleClass For Both Buttons - Issue With $(this) Jquery Object

Solution 1:

Solution 2:

Post a Comment for "Using ToggleClass For Both Buttons - Issue With $(this) Jquery Object"