jquery - 条件悬停的问题 - jQuery

Question

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

本质上，玩家 1 的牌是黄色的，玩家 2 的牌是蓝色的。现在，悬停功能导致所有点击的图 block 变成蓝色，当它正确地悬停在空白图 block 上时，它已经反转了已选择图 block 的颜色。

知道发生了什么吗？

相关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 语句后有一些不必要的分号。