通过尝试将 2 个功能合并为一个来简化 - 重叠问题

我做了一个独家复选框，其中我有 2<input>和 2 <button>（也有黑色/白色独家）<input>；在 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-classic btn-xs">Player 2</button>           
   </div>
  </label>
 </div>

一切工作正常，具有如下功能（反转颜色黑/白两种PlayerVsComputer和Player1VsPlayer2类型的游戏）。

当鼠标超出按钮区域时，我做了：

   // Restore original state when mouseleave
   $('#PlayerVsComputer').mouseleave(restore1);
   // Restore original state when mouseleave
   $('#Player1VsPlayer2').mouseleave(restore2);

   // Restore default choice for player vs computer
   function restore1() {
     buttonsPlayerVsComputer.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       buttonsPlayerVsComputer.eq(0).removeClass('btn-classic').addClass('btn-inverse');
       buttonsPlayerVsComputer.eq(1).removeClass('btn-inverse').addClass('btn-classic');
   }
   });}

// Restore default choice for player1 vs player2
   function restore2() {
     buttonsPlayer1VsPlayer2.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       buttonsPlayer1VsPlayer2.eq(0).removeClass('btn-classic').addClass('btn-inverse');
       buttonsPlayer1VsPlayer2.eq(1).removeClass('btn-inverse').addClass('btn-classic');
   }});}

当鼠标进入时<div>：

    // Flip buttons player vs computer color when mouse is entering
    buttonsPlayerVsComputer.mouseenter(toggle1);
    // Flip buttons player vs computer color when mouse is entering
    buttonsPlayer1VsPlayer2.mouseenter(toggle2);

 function toggle1() {
     buttonsPlayerVsComputer.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   }

   function toggle2() {
     buttonsPlayer1VsPlayer2.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   }

现在，我想简化并合并toggle1和toggle2功能整合到独特的toogle功能。我试图做：

  // toggle black/white for both types of game 
  function toggle() {
     var element = $(this);
     element.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   }

按照相同的方式restore从restore1一个restore2函数中执行一个独特的函数，我做了：

// Restore default choice for both types of game
   function restore() {
     var element = $(this);
     element.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       element.eq(0).removeClass('btn-classic').addClass('btn-inverse');
       element.eq(1).removeClass('btn-inverse').addClass('btn-classic');
     }
    }); 
   }

不幸的是，这种简化不能正常工作，它会导致之间的重叠buttons，<div>：

您可以看到第一个有效的解决方案（使用 toggle1、toggle2、restore1 和 restore2）：使用 2 个函数的版本

您可以通过尝试仅使用 2 个功能（切换和恢复）来查看其他结果，但它不起作用：

版本不能仅使用一种功能切换和恢复

如果有人能告诉我我的错误在哪里以及如何修复它，问候