Question

我一直想找到一种方法来为学校创造一个tic tac toe游戏，我被卡住了。我正在尝试使用if else if来更改div的背景颜色。它有点工作，但不是改变我点击的每个方格的BG颜色，所有9个方块都改变了颜色。如果我将“boxes [i]”更改为“this”，我会得到一个“未定义”，代码只会输入x或o。

    var turns = 'X';
    var xColor = "#1772e8";
    var oColor = "#e15258";

    function changeColor() {
        var boxes = document.querySelectorAll(".box");
        for (var i = 0; i < boxes.length; i += 1) {
          if( turns === 'X' ) {
               boxes[i].style.backgroundColor = oColor;
          } else {
               boxes[i].style.backgroundColor = xColor;
          }
        }
    }

function click() {
        if ( this.id === "box1" ) {
          if (document.getElementById("box1").innerHTML === ""){ 
               document.getElementById("box1").innerHTML = turns;
               changeTurn();
               changeColor();
          }
     }

任何帮助将不胜感激。

Answer 1

您正在选择页面上的每个.box元素，这就是它们都在变化的原因。

我会尝试这样的事情（假设您从onClick调用changeColor（））：

HTML：

<div class="box" onclick="changeColor(this)"> </div>

JS：

function changeColor(clickedBox) {
    if( turns === 'X' ) {
         clickedBox.style.backgroundColor = oColor;
    } else {
         clickedBox.style.backgroundColor = xColor;
    }
}

通过将单击的框传递给函数，您知道必须处理的确切框（请注意，我们在onClick定义中传递“this”，这就是为什么您之前使用“this”的尝试是未定义的）

编辑： Here is an example on Codepen

Answer 2

如果jQuery没问题，请执行此操作

＆＃13;

$(document).ready(function(){
  $(".box").click(function(){
    //If else statement here
    $(this).css("background-color","[color of your choice]");
  }
});

＆＃13;

仅更改一个ID的背景颜色而不是全部

2 个答案: