关闭后单击并保持点击悬停事件
这是我的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;
}
这将是,如果你使用的类和使用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>
尝试通过一些属性或类 “hasClicked” 和 “未点击” 组织你的表格单元格。然后,只应用“未点击”的悬停。
所以,让我们假设你给每个表单元格一个名为hasNotBeenClickedYet
的类。每当我们将鼠标悬停在类别为hasNotBeenClickedYet
的元素上时,我们都希望执行您的悬停操作。
当其中一个被点击时,我们想从该单元中删除hasNotBeenClickedYet
,所以它不再有悬停动作。
因此我们要改变
$(".tableCell").hover(function(){
...
}
喜欢的东西
$(".hasNotBeenClickedYet").hover(function(){
...
}
,并删除类,当它被点击
$(".hasNotBeenClickedYet").click(function(){
$(".hasNotBeenClickedYet").removeClass("hasNotBeenClickedYet");
...
}
可以使用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>
我想通过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>
你应该表现出你的HTML,并创建一个代码段(见在编辑模式下的工具栏)。最好的祝福。 – YakovL
你的'off()'事件应该可以正常工作:http://codepen.io/anon/pen/rrxkgW –