javascript - 第一次点击时函数不执行

Question

你好，我有一些代码可以在井字游戏的 div 中标记“X”或“O”，但该函数不会在第一次单击时执行，而是在第二次单击时启动

我查看了其他被问到的问题但还没有找到任何与我的代码相关的内容

任何帮助将不胜感激

function setX() {
    $('#container').on('click', function (e) {

        if (this !== e.target) e.target.textContent = 'X';

    });
    event.stopPropagation();
}

function setO() {
    $('#container').on('click', function (e) {

        if (this !== e.target) e.target.textContent = 'O';

    });
    event.stopPropagation();
}

这是我每次点击时在功能之间切换的代码

let myFunctions = [setO, setX, setO, setX, setO, setX, setO, setX, setO, setX, setO]
let nextFunction = 0;

function myFunctionSwitcher() {
    myFunctions[nextFunction]();
    nextFunction = nextFunction + 1;
}

container.addEventListener('click', () => {
    myFunctionSwitcher();
    // whoWon()

});

Answer 1

就像 comments 中已经指出的那样，您将在每次点击时添加事件监听器，而不是设置 X 或 O。无需过多更改当前代码，您可以执行以下操作:

function setX(element, event) {
  // don't set an onclick event here
  if (element !== event.target) event.target.textContent = 'X';
}

function setO(element, event) {
  // don't set an onclick event here
  if (element!== event.target) event.target.textContent = 'O';
}

let myFunctions = [setO, setX, setO, setX, setO, setX, setO, setX, setO, setX, setO];

function myFunctionSwitcher(element, event) {
    // pass the element and event forward to setO or setX
    myFunctions[nextFunction](element, event);
    nextFunction = nextFunction + 1;
}

$('#container').on('click', function (event) {
    // pass this and the event to myfunction
    myFunctionSwitcher(this, event);
    // whoWon()
});

你可以让自己变得更容易，而是做这样的事情:

// creates a toggle function toggling between `a` and `b`, starting at `a`
function toggleValues(a, b) {
  var toggle = false;
  return function () {
    toggle = !toggle;
    return toggle ? a : b; // ternary if
  };
}

const toggleOX = toggleValues('O', 'X');
$('#container').on('click', function (event) {
  if (this !== event.target) event.target.textContent = toggleOX();
  // whoWon()
});