javascript - JQuery 存储数据以便稍后检查

Question

.cell 类是井字棋盘表中的 9 个单元格。单击 X 和 O 一直有效，但我正在尝试检查并仅在单元格尚未使用时才允许和 X 或 O。

我尝试过使用 JQuery 数据属性，使用键和值，并且只使用值。

$('.cell').on('click', function () {
if (currentTurn === 'X' && (!$(this).data('already-played', 'yes'))) {
  $(this).text('X')
  $(this).data('already-played', 'yes')
  currentTurn = 'O'
} else {
  $(this).text('O')
  $(this).data('already-played', 'yes')
  currentTurn = 'X'
}

对于这样的事情，数据属性是否可行，或者有人会指出如何调整它？

Answer 1

你应该替换:

!$(this).data('already-played', 'yes')

作者:

$(this).data('already-played')!=='yes'

因为当您将两个参数传递给 data() 函数时，它会将第二个参数作为值附加到第一个参数，因此 yes 将受到影响data-already-played 属性。

注意:您应该在此处检查您的逻辑，我建议改用以下条件结构，这样您可以在单元格可用时检查两个选项:

$('.cell').on('click', function () {
    if ( $(this).data('already-played')!=='yes' ) {
        if( currentTurn === 'X' ){
          $(this).text('X')
          $(this).data('already-played', 'yes')
          currentTurn = 'O'
        } else {
          $(this).text('O')
          $(this).data('already-played', 'yes')
          currentTurn = 'X'
        }
    }else{
        alert( 'This cell was already filled.' );
    }
});