Question

我正在尝试制作Tic-Tac-Toe游戏，我目前正在研究选择盒子本身的方面，但在使用JQuery时：not selector似乎不起作用。

function main(){
  //Functions
  $('.cell:not(.block)').click(function(){
    $(this).addClass(color);
    $(this).addClass('block');
    if(color=='g'){color='r';}else{color='g';}
  });
  
  //Variables
  var color = 'g';
}

$().ready(main);

html {
  background-color:black;
  color:white;
  text-align:center;
}

.cell {
  border: 1px solid white;
  margin:1px;
  width:30%;height:30%;
}
.g {background-color:lime;}
.r {background-color:red;}

#board {height:500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Tic Tac Toe</header>
<div id='board'>
  <div class='cell'></div>
  <div class='cell'></div>
  <div class='cell'></div>
</div>

Answer 1

这不是jQuery如何选择元素。

当您运行$('selector')时，将针对DOM的当前状态评估选择器立即。找到了您的三个元素，因为它们都没有.block，并且点击处理程序绑定到所有三个元素。

有几种解决方法：

如果要动态评估选择器，则需要使用on将事件委托给其中一个包含元素。特定子元素上的事件将冒泡到包含元素的处理程序，并且每次针对选择器进行测试。这是最昂贵的选择，可能是最不可取的;你不应该依赖jQuery选择器来实现这种逻辑：
```
$('.board').on('click', '.cell:not(.block)', function () {
  // ...
});
```

或者，最简单和最便宜的选择是在点击处理程序中检查.block：

$('.cell').click(function () {
  if ($(this).hasClass('block')) return;
  //...

最后，您可以在添加.block类
的同时取消绑定点击处理程序
```
$('.cell').click(function () {
  $(this).unbind( "click" );
  // ...
```

Answer 2

由于您在完成选择后更改了类，因此它将被视为动态选择器，您需要使用.on()。

function main() {
  //Functions
  $('#board').on('click', '.cell:not(.block)', function() {
    $(this).addClass(color).addClass('block');
    color = color == 'g' ? 'r' : 'g';
  });

  //Variables
  var color = 'g';
}

$().ready(main);

html {
  background-color: black;
  color: white;
  text-align: center;
}
.cell {
  border: 1px solid white;
  margin: 1px;
  width: 30%;
  height: 30%;
}
.g {
  background-color: lime;
}
.r {
  background-color: red;
}
#board {
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Tic Tac Toe</header>
<div id='board'>
  <div class='cell'></div>
  <div class='cell'></div>
  <div class='cell'></div>
</div>

不能使用：not（）选择器

2 个答案: