無法使用：不（）選擇

我試圖做一個井字棋遊戲，我目前正在選擇框自身的方面，但同時使用JQuery的：沒有選擇似乎並不正在工作。無法使用：不（）選擇

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>

來源

2014-10-28 Xavier Horn

是什麼讓你覺得它不工作？似乎完美地工作。當我點擊一個'div'時，它會改變它的顏色。 – 2014-10-28 17:06:08

@FelixKling運行這個代碼片段，你不應該點擊一個'.cell'，它有'.block'類，但你可以。 – 2014-10-28 17:07:02

@SterlingArcher：這是你自己的（很可能是真實的）解釋，但是OP應該仍然提供對問題的適當描述。 *「：不是選擇器似乎沒有工作」*不會告訴任何有關OP的期望。（我只是迂腐;）） – 2014-10-28 17:07:55

即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"); 
    // ...

來源

2014-10-28 17:06:34 meagar

既然你正在改變類已經作出了選擇這隻能算作一個動態選擇後，你需要使用.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>

來源

2014-10-28 17:07:26 Spokey

無法使用：不（）選擇

回答

相關問題