2012-03-07 76 views
1

嗨,避免在某些情況下使用jquery更改td bgcolor?

我有一張16張td標籤的表格。每張td都有一些可以改變td背景顏色的事件。但是,事情是,如果用戶點擊某個td,那麼td標籤的背景顏色必須更改爲其他顏色,並且對於此td,不應該發生mouseout/over事件。表示td的背景顏色不應該是鼠標懸停和鼠標事件已被點擊更改...我的代碼有什麼問題?

這裏是我的代碼.....

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

回答

3

你必須解除綁定後「點擊」發生

你的點擊處理程序應該是這樣的「鼠標懸停」和「鼠標移開」 -

$('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這樣的 -

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

$(this)返回一個新的陣列中的每個對象的時間。

+0

就像我會做到這一點 – Th0rndike 2012-03-07 13:33:02

+0

謝謝,它不檢查變量(在我選擇的情況下),它不是一個正確的方式? – 2012-03-07 13:36:58

+0

@RamaRaoM - 檢查我更新的答案。 – 2012-03-07 14:10:42

相關問題