Question

我做了一个独家复选框，我<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）：version working with 2 functions

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

version not working with only one function toggle and restore

如果有人能告诉我我的错误在哪里以及如何解决，请问

Answer 1

添加元素作为函数的参数，因为如果此在事件侦听器之外，此将不会返回元素，而是窗口。

通过尝试将两个函数合并为一个来简化：重叠

1 个答案: