javascript - 无法使用 :not() Selector

Question

我正在尝试制作一个井字游戏，目前我正在研究自己选择框的方面，但是在使用 JQuery 时，:not 选择器似乎不起作用。

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，并且点击处理程序已绑定(bind)到所有三个元素。

有几种方法可以解决这个问题:

• 如果您希望选择器被动态计算，您需要使用on 将事件委托(delegate)给其中一个包含元素。特定子元素上的事件将冒泡到包含元素的处理程序，并每次都针对选择器进行测试。这是最昂贵的选择，也可能是最不理想的选择；你不应该依赖 jQuery 选择器来实现这种逻辑:

  $('.board').on('click', '.cell:not(.block)', function () {
    // ...
  });
  

• 或者，最简单和成本最低的选择是简单地检查点击处理程序中的 .block:

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

• 最后，您可以在添加 .block 类的同时取消绑定(bind)点击处理程序

  $('.cell').click(function () {
    $(this).unbind( "click" );
    // ...