javascript - 对两个按钮使用 toggleClass - $(this) jquery 对象的问题

Question

当鼠标悬停在其中一个按钮上时，我想制作 2 个按钮的翻转颜色。我有以下 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 的两个按钮:

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

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

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

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

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

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

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

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

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

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

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

可以在这个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: 我必须明确指出，当鼠标离开 2 个并排按钮时，我希望原始颜色再次出现:我必须使用 hover 还是 鼠标悬停 ?

Answer 1

由于同一个函数可以作为 handlerIn 和 handlerOut，所以不需要将同一个函数作为第二个参数传递给 .hover。方法。引用this对于 jQuery .hover规范。

检查此代码片段。可能这就是您正在寻找的行为。
当鼠标悬停在按钮上时，它会切换。
当鼠标移出按钮时，它会切换回原来的样式。

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

您的代码中需要的更正是

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

这可以简化如下。

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

引用this用于 jQuery toggleClass 规范。

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