關閉後單擊並保持點擊懸停事件

Question

這是我的js代碼。我正在嘗試製作一個TicTacToe遊戲。當玩家懸停在表格單元格上時，他們將在該單元格中看到「x」或「o」標記，並顯示50％的不透明度。當他們點擊表格單元格時，他們將在該單元格中看到一個具有100％不透明度的標記。當我將鼠標懸停在已被點擊的單元格上時，它將繼續應用懸停事件。如何在點擊後關閉懸停事件，同時保持單元格的新不透明度？我的功能的目標是能夠懸停在表格單元格上，並暫時看到50％的不透明標記，並能夠點擊表格單元並永久地看到100％不透明標記。圖片http://imgur.com/a/WaZBQ

注：我嘗試在我的單擊事件結束時添加一個.off函數。

 $(this).off("mouseenter mouseleave); 

這並不能解決我的問題。

 $(".tableCell").hover(function(){ 
      $(this).children(".tableCellMarker").attr("src", function(index, attr){ 
       return attr.replace("", "images/X.png"); 
      }); 
     }, function(){ 
      $(this).children(".tableCellMarker").attr("src", function(index, attr){ 
       return attr.replace("images/X.png", ""); 
      }); 
     }); 
     $(".tableCell").click(function(){ 
      $(this).children(".tableCellMarker").attr("src", function(index, attr){ 
       return attr.replace("","images/X.png"); 
      }); 
      $(this).children(".tableCellMarker").css("opacity",1); 
      $(this).addClass("marked"); 
     }); 

這裏是.tableCellMarker

.marker { 
     cursor:pointer; 
     margin:-80px 0px 150px 50px; 
     opacity:0.5; 
     position:absolute; 
    } 

Answer 1

這將是，如果你使用的類和使用CSS特異性應對狀態，以便更容易的CSS。

$("table tbody").on("click", "td", function() { 
 
    $(this).toggleClass("selected"); 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    background-color: white; 
 
} 
 

 
td:hover { 
 
    background-color: yellow; 
 
} 
 

 
td.selected, td.selected:hover { 
 
    background-color: green; 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

現在，我們怎樣才能將其應用到井字？添加更多的CSS類和一些邏輯。

var turn = true; //determines x (true) and o (false) 
 
$(".game tbody").on("click", "td", function() { //bind click to cell 
 
    var cell = $(this); //get cell that was clicked 
 
    if (cell.hasClass("selected")) return; //if cell was selected than ignore click 
 
    $(this) 
 
    .addClass("selected") //mark cell as selected 
 
    .addClass(turn?"x":"o"); //set the class based on turn 
 
    turn = !turn; //toggle player 
 
    $(".game").toggleClass("x o"); //toggle whose turn it is (so hover is different) 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    background-color: white; 
 
} 
 

 
.x td:hover { 
 
    background-color: #ABEBC6; 
 
} 
 
.o td:hover { 
 
    background-color: #F5B7B1;  
 
} 
 

 

 
td.x, td.x:hover { 
 
    background-color: #239B56; 
 
} 
 

 
td.o, td.o:hover { 
 
    background-color: #B03A2E; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="game x"> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

嘗試通過一些屬性或類 「hasClicked」 和 「未點擊」 組織你的表格單元格。然後，只應用「未點擊」的懸停。

所以，讓我們假設你給每個表單元格一個名爲hasNotBeenClickedYet的類。每當我們將鼠標懸停在類別爲hasNotBeenClickedYet的元素上時，我們都希望執行您的懸停操作。

當其中一個被點擊時，我們想從該單元中刪除hasNotBeenClickedYet，所以它不再有懸停動作。

因此我們要改變

$(".tableCell").hover(function(){ 
    ... 
} 

喜歡的東西

$(".hasNotBeenClickedYet").hover(function(){ 
    ... 
} 

，並刪除類，當它被點擊

$(".hasNotBeenClickedYet").click(function(){ 
    $(".hasNotBeenClickedYet").removeClass("hasNotBeenClickedYet"); 
    ... 
} 

Answer 3

可以使用jQuery .unbind()事件來做到這一點。

jQuery(function($) { 
 
    $('.foo').on('mouseenter', function(e) { 
 
    $(this).text('hover'); 
 
    }); 
 

 
    $('.foo').on('mouseleave', function(e) { 
 
    $(this).text(''); 
 
    }); 
 

 
    $('.foo').on('click', function(e) { 
 
    $('.foo').unbind('mouseenter'); 
 
    }); 
 
});

.foo { 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
    line-height: 200px; 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="foo"></div>

Answer 4

我想通過CSS具體處理本作中epascarello's answer建議可能是最好的辦法。但是，如果您確實想要在代碼中處理懸停事件而不是CSS，則可以合併event delegation和:not() selector以動態控制顯示狀態。

$(".grid").on("click", ".tableCell", function() { 
 
    //when clicking, toggle selection state and remove hover state 
 
    $(this).removeClass("hovered"); 
 
    $(this).toggleClass("selected"); 
 
}).on("mouseenter", ".tableCell:not(.selected)", function() { 
 
    //only if not selected, add hover state 
 
    $(this).addClass("hovered"); 
 
}).on("mouseleave", ".tableCell", function() { 
 
    //whenever leaving, it's always safe to remove hover state 
 
    $(this).removeClass("hovered"); 
 
});

.grid { 
 
    border: 1px solid black; 
 
} 
 
.grid td { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 
.selected { 
 
    background-color: green; 
 
} 
 
.hovered { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="grid"> 
 
    <tr> 
 
    <td class="tableCell"></td> 
 
    <td class="tableCell"></td> 
 
    <td class="tableCell"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tableCell"></td> 
 
    <td class="tableCell"></td> 
 
    <td class="tableCell"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tableCell"></td> 
 
    <td class="tableCell"></td> 
 
    <td class="tableCell"></td> 
 
    </tr> 
 
</table>