クリックしてからホバーイベントをオフにしてください。

Question

これは私のjsコードです。私はTicTacToeゲームを作ろうとしています。プレーヤーが表のセル上を移動すると、50％の不透明度を持つそのセル内に「x」または「o」のマーカーが表示されます。彼らが表のセルをクリックすると、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です。

$("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クラスと少しのロジックを追加してください。いくつかの属性またはクラス "hasClicked" と "unClicked" で、あなたのテーブルのセルを整理する

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

してみてください。次に、 "unClicked"に対してのみホバーを適用します。

だから、各テーブルセルにhasNotBeenClickedYetというクラスを与えることから始めましょう。クラスhasNotBeenClickedYetの要素の上にカーソルを置くたびに、ホバーアクションを実行します。

これらのいずれかをクリックすると、そのセルからhasNotBeenClickedYetを削除して、ホバーアクションがなくなります。それは

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

Answer 3

をクリックされていますとき

だから我々はあなたがjQuery .unbind()を使用することができます

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

のようなものに

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

を変更すると、そのクラスを削除したいと思いますこれを行うイベント。

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

私はepascarello's answerで提案されているようにCSSの特異性を介してこれを取り扱うことは、おそらく最良の方法だと思います。ただし、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>