避免在某些情况下使用jquery更改td bgcolor？

Question

嗨,

我有一个包含16个td tags.Every的表，td有鼠标经过和鼠标移出事件来改变td的背景色，但问题是，如果用户点击某个td，td标签的背景色必须更改为其他颜色，对于这个td，鼠标移出/移出事件不应该是occurred.Means，td的背景色不应该在鼠标移转和鼠标移出事件上更改，在我的代码中clicked...What是错误的吗？

这是我的代码.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <style>

  table,table td{
   border:1px solid;
  }
  </style>
 </head>

 <body>

  <table>
   <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
   <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
   <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
   <tr><td>13</td><td>14</td><td>15</td><td></td></tr>
  </table>
 </body>

 <script>
  $(document).ready(function(){

   $('table td').mouseover(function(){
   if($(this).selected!='X')
     $(this).css({'background-color':'#ffff66'});
   });

   $('table td').mouseout(function(){
     if($(this).selected!='X')
    $(this).css({'background-color':'#fff'});
   });

  $('table td').click(function(){
    $(this).css({'background-color':'#6666ff'});
    $(this).selected='X';
   });

  });
 </script>
</html>

Answer 1

在'click‘发生后，你必须解除'mouseover’和'mouseout‘的绑定

你的点击处理程序应该是这样的-

 $('table td').click(function(){
    $(this).css({'background-color':'#6666ff'});       
    $(this).unbind('mouseout');
    $(this).unbind('mouseover');
   });

或者像这样更好-

$('table td').click(function(){
    var td = $(this);
    td.css({'background-color':'#6666ff'});       
    td.unbind('mouseout');
    td.unbind('mouseover');
   });

有关解除绑定here的详细信息

也就是说，如果你像这样设置和访问索引为0的'selected‘，你的代码仍然可以工作--

$(this)[0].selected='X'

$(this)每次都返回一个新的数组对象。