Question

您好，

我有一个16 td标签的表。每个td都有mouser over和out事件，它们改变了td的背景颜色。但问题是，如果用户点击某个td，则必须将td标签的背景颜色更改为其他颜色，对于此td，不应发生mouseout / over事件。意思是，td的背景颜色不应该是更改了鼠标悬停和mouseout事件已被点击...我的代码有什么问题？

这是我的代码.....

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

在“点击”发生后，您必须解除绑定'鼠标悬停'和'鼠标移除'

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

 $('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

如果您设置并访问索引为零的'selected'，那么您的代码仍然可以正常工作 -

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

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

使用jquery避免在某些条件下更改td bgcolor？

1 个答案: