2012-03-07 5 views
1

こんにちは、jqueryを使用して一部の条件でtd bgcolorを変更しないようにしますか?

私は16のtdタグのテーブルを持っています。すべてのtdには、tdの背景色を変更するmouserオーバーイベントとアウトイベントがあります。しかし、ユーザーが特定のtdをクリックすると、そのtdタグの背景色を他の色に変更する必要があります。このため、mouseout/overイベントは発生しません.MDSでは、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

について

もっとあなたのようにインデックスゼロで「選択」 -

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

$(this)は、新しい配列が毎回オブジェクトを返します。

+0

正確には私はそれをしたでしょう – Th0rndike

+0

ありがとう、それは(私の場合は選択)変数をチェックすると、それは適切な方法ではありませんか? –

+0

@RamaRaoM - 最新の回答を確認してください。 –

関連する問題