关闭后单击并保持点击悬停事件

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>