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.");
    };
});

相关的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;
}

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

＆＃13;

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);
    }
  
});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

另外 - 只是一个建议 - 您可能想要清理您的代码。在那里发现了一些if语句后，我注意到了一些不必要的分号。

Answer 2

也许试试

td:hover{
    opacity:0.5;
}

并删除悬停功能 - 因为CSS正在改变的是td类（.blue或.yellow）的不透明度。

无需javascript：）

条件悬停的问题 - jQuery

2 个答案: