对两个按钮都使用toggleClass-$(this)jquery对象出现问题 [英] Using toggleClass for both buttons - Issue with $(this) jquery object

问题描述

当鼠标悬停在两个按钮之一上时，我想将其翻转颜色.我有以下HTML:

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

 <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-xs">Player 2</button>                       
   </div>
  </label>
 </div>

和CSS:

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


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

首先，我专注于div容器为id="PlayerVsComputer"的第一个按钮组.我试图通过.btn class选择两个按钮:

Firstly, I am focused on the first button group whose div container is id="PlayerVsComputer". I tried to select both button with .btn class by doing :

var playerVsComputerContainer = $('#PlayerVsComputer .btn');

并在鼠标悬停在两个按钮之一上时创建以下功能:

and create the following function when mouse is over on one of the 2 buttons :

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

我意识到playerVsComputerContainer可能是jQuery Object的数组(确认的想法)，因为在Javascript控制台上，我得到了:

I realized that playerVsComputerContainer may be a array of jQuery Object (idea to confirm) because on Javascript console, I get :

>> $('#PlayerVsComputer button.btn'); 

Object { 0: button.btn.btn-inverse.btn-xs, 1: button.btn.btn-classic.btn-xs, length: 2, ...

由此，我尝试通过以下方式仅选择一个按钮:

From this, I tried to select only one button by doing :

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

但是$(this)[0]似乎无效.所以我做了上游:

But it seems that $(this)[0] is not valid. So I did upstream :

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

不幸的是，这不起作用.我只是希望当鼠标悬停在其上方时，两个左右按钮的颜色能够翻转其初始颜色(黑白)(后来，我希望用户通过单击鼠标来确认当前颜色的这种变化).

Unfortunately, this doesn't work. I just want that colors of 2 side to side buttons flip their initial color (black and white) when mouse is over it (later, I want this change of current color to be confirmed by user with a mouse click).

您可以在 jsfiddle

var playerVsComputerContainer = $('#PlayerVsComputer .btn');
playerVsComputerContainer.mouseover(function() {
  $(this).toggleClass('btn-inverse');
  $(this).toggleClass('btn-classic');
  //$(this)[0].toggleClass('btn-inverse');
  //$(this)[0].toggleClass('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>

更新1:我必须精确地说，当鼠标不在左右两个按钮中时，我希望再次显示原始颜色:必须使用hover或mouseover吗?

UPDATE 1: I have to precise that I want original colors to appear again when mouse is out of 2 side to side buttons : Must I use hover or mouseover ?

推荐答案

由于相同的函数可以用作handlerIn和handlerOut，因此无需将与第二个参数相同的函数传递给.hover方法. 有关jQuery .hover规范，请参考此.

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.

在您的html中，类名的拼写错误为btn-clssic. <button type="button" class="btn btn-clssic btn-xs">Computer</button>

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

这可以简化如下.

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

对于jQuery toggleClass规范，请参考此.

Refer this for jQuery toggleClass specification.

$('#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>

这篇关于对两个按钮都使用toggleClass-$(this)jquery对象出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！