javascript - 我正在尝试将变量的值分配给 'data-index' 属性

Question

我正在为 Tic-Tac-Toe 项目开发“计算机移动”选项。我的游戏板网格由具有相同类(.box)的按钮组成。我使用 Jquery 在单击“计算机移动”按钮时触发网格元素的 onClick 函数。

$('.box[data-index="1"]').trigger('click', onUpdate)

这里的代码可以工作，但我想使用我存储在变量中的随机生成的数字。就像下面这样:

$('.box[data-index=compChoice]').trigger('click', onUpdate)

但是，这不起作用。我尝试过带引号和不带引号。

我还尝试过以各种不同的方式和不同的语法使用一些不同的 Jquery 方法，如 .attr()、.val()、.get()，但我运气不佳。

任何帮助将不胜感激。

这是我的游戏板:

                      <div class="row">
                            <button data-index="0" class="col-2 box alt-color"></button>
                            <button data-index="1" class="col-2 box alt-color"></button>
                            <button data-index="2" class="col-2 box alt-color"></button>
                      </div>
                      <div class="row">
                            <button data-index="3" class="col-2 box alt-color"></button>
                            <button data-index="4" class="col-2 box alt-color"></button>
                            <button data-index="5" class="col-2 box alt-color"></button>
                      </div>
                      <div class="row">
                            <button data-index="6" class="col-2 box alt-color"></button>
                            <button data-index="7" class="col-2 box alt-color"></button>
                            <button data-index="8" class="col-2 box alt-color"></button>
                      </div>

这是我的计算机移动功能:

const onCompMove = function (event) {
  event.preventDefault()
  const compChoices = store.game.cells
  const choices = []
  for (let i = 0; i < compChoices.length; i++) {
    if (compChoices[i] === '') {
      choices.push(i)
    }
  }
  const compChoice = choices[Math.floor(Math.random() * choices.length)]
  store.compChoice = compChoice
  console.log(compChoice)
  $('.box[data-index=compChoice]').trigger('click', onUpdate)
}

const onUpdate = function (event) {
  event.preventDefault()
  console.log(event.target)
  if (store.game.over === false) {
    if ($(event.target).text() !== '') {
      return ui.invalidMove()
    } else if ($(event.target).text() === '') {
      $(event.target).text(store.turn)
    }
    const index = $(event.target).attr('data-index')
    const value = store.turn
    takenIndex.push(index)
    // console.log(takenIndex)
    api.update(index, value)
      .then(ui.onUpdateSuccess)
      .catch(ui.onUpdateFailure)
  } else {
    ui.invalidGameOver()
  }
  switchPlayer()
}

Answer 1

变量不会在字符串内扩展，您需要连接:

$('.box[data-index=' + compChoice + ']').trigger('click', onUpdate)

或者使用 ES6 模板文字

$(`.box[data-index=${compChoice}]`).trigger('click', onUpdate)