条件悬停问题 - jQuery

Question

我正在尝试构建一个井字游戏板，它可以根据玩家的选择改变颜色。该部分有效，但是当尝试为玩家的潜在选择添加悬停预览功能时，我无法获得正确的结果。

本质上，玩家 1 的牌是黄色的，而玩家 2 的牌是蓝色的。现在，悬停功能导致所有点击的图块都是蓝色的，虽然它正确地悬停在空白图块上，但它已经反转了已经选择的图块的颜色。

知道发生了什么吗？

相关的jQuery：

count = 0
// hover classes for clear selection
$( "td" ).hover(function() {
if (count % 2 === 0) {
    $(this).toggleClass('yellowHover');
    return;
    } else {
    $(this).toggleClass('blueHover');
    return;
    };
});

// upon click change turns, countt++, change box value, check if winner
$('td').click(function() {
    var row = $(this).parent().index();
    var col = $(this).index();

    if(player1Name=="" || player2Name==""){
  alert("Please set player all the names.");
  return;
}

    // doesn't allow spot to be clicked on twice
    if(board[row][col]!==0){
  alert("This position is taken. Please try again.");
  return;
};
    // if count is even, player 1 is yellow
    // if count is odd, player 2 is blue
    if (count % 2 === 0) {
        board[row][col] = 1;
        $(this).addClass('yellow');
        count++;
        winnerCheck(1, player1Name);
        draw();
        messageBoard(player2Name + "'s turn. Click a circle to mark it blue.");
    } else {
        board[row][col] = 2;
        $(this).addClass('blue');
        count++;
        winnerCheck(2, player2Name);
        draw();
        messageBoard(player1Name + "'s turn. Click a circle to mark it yellow.");
    };
});

相关css：

.yellow {
  background-color: #ffc300;
}

.blue {
  background-color: #73d2c9;
}

.yellowHover {
  background-color: #ffc300;
  opacity: 0.5;
}

.blueHover {
  background-color: #73d2c9;
  opacity: 0.5;
}

相关html：

        <table>
            <tbody>
                <tr class="box_row" >
                    <td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td>

                    <td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td>

                    <td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td>
                </tr>
                <tr class="box_row">
                    <td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td>

                    <td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td>

                    <td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td>
                </tr>
                <tr class="box_row">
                    <td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td>

                    <td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td>

                    <td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td>
                </tr>
            </tbody>
        </table>

Answer 1

要解决此问题，您只需使蓝色和黄色类更具体一点。

代替：

.yellow {
  background-color: #ffc300;
 }
.blue {
  background-color: #73d2c9;
 }

...试试这样的：

td.box_cell.yellow {
   background-color: #ffc300;
}

td.box_cell.blue {
    background-color: #73d2c9;
}

这是您的代码的简化版本，用于演示（希望）您正在寻找的结果：

count = 0;

$("td").hover(function(){
  if (count % 2 === 0) {
    $(this).toggleClass('yellowHover');
    return;
  } else {
    $(this).toggleClass('blueHover');
    return;
  }
});
$('td').click(function(e) {
  // if count is even, player 1 is yellow
  // if count is odd, player 2 is blue
    if (count % 2 === 0) {
      $(this).addClass('yellow');
       count++; 
       console.log(count);
    } else {        
        $(this).addClass('blue');
        count++;        
        console.log(count);
    }
  
});

/* Added this for demo purposes only */
td {border:1px solid pink;width:50px;height:50px}
/* -- */

td.box_cell.yellow {
  background-color: #ffc300;
}

td.box_cell.blue {
  background-color: #73d2c9;
}

.yellowHover {
  background-color: #ffc300;
  opacity: 0.5;
}

.blueHover {
  background-color: #73d2c9;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
            <tbody>
                <tr class="box_row" >
                    <td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td>

                    <td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td>

                    <td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td>
                </tr>
                <tr class="box_row">
                    <td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td>

                    <td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td>

                    <td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td>
                </tr>
                <tr class="box_row">
                    <td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td>

                    <td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td>

                    <td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td>
                </tr>
            </tbody>
        </table>

另外——只是一个建议——你可能想清理你的代码。我注意到在几个 if 语句之后有一些不必要的分号。

Answer 2

不妨试试

td:hover{
    opacity:0.5;
}

并移除悬停功能——因为 CSS 所改变的只是 td 类（.blue 或 .yellow）的不透明度。

无需 javascript :)