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

的css

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

Answer 1

如果您使用类并使用CSS Specificity来处理状态，那将会容易得多。

＆＃13;

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

＆＃13;

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;  
}

＆＃13;

<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>

＆＃13;

现在我们怎样才能将它应用于tic tac toe？添加更多css类和一些逻辑。

＆＃13;

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)
});

＆＃13;

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;  
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试按某些属性或类“hasClicked”和“unClicked”组织表格单元格。然后，只对“unClicked”使用悬停。

所以，让我们假设您从为每个表格单元格提供一个名为hasNotBeenClickedYet的类开始。每当我们将鼠标悬停在具有类hasNotBeenClickedYet的元素上时，我们都希望执行悬停操作。

单击其中一个后，我们要从该单元格中删除hasNotBeenClickedYet，因此不再有悬停操作。

所以我们想要改变

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

类似

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

并在点击时删除该类

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

Answer 3

我认为epascarello's answer中建议的通过CSS特异性来处理这个问题可能是最好的方法。但是，如果您确实希望在代码而不是CSS中处理悬停事件，则可以组合event delegation和:not() selector来动态控制显示状态。

＆＃13;

$(".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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

您可以使用 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>

单击后关闭悬停事件并继续单击

4 个答案: