mouseclick更改文本的顏色並解除以前點擊的脫機

我試圖實現類似於我們在Gmail中看到的內容。當我將鼠標懸停在上面時，會更改文本顏色，並在單擊時將文本的顏色更改爲紅色。當我點擊另一行時，會發生同樣的事情。然而，在我的情況下，我缺少一些東西，因爲我的新手知識。我需要解除之前的點擊，因爲之前的點擊將文本保持爲紅色。mouseclick更改文本的顏色並解除以前點擊的脫機

$("#index td").hover(
      function() { 
       $(this).css({'background': '#e9e7e7', 
           'cursor': 'pointer'}); 
      }, 
      function() { 
       $(this).css({'background': '#ffffff', 
           'cursor': 'pointer'}); 
      } 
     ).click(function(){ 
      $(this).css({ 'color': 'red'}); 
     });

編輯

<tr style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); cursor: pointer; background-position: initial initial; background-repeat: initial initial; " class="selected"><td style="padding:2.5px 0px 2.5px 2px;">XYZZZZ</td></tr>

來源

2012-05-08 user525146

當你說「先前點擊」，你的意思是你在這之前點擊的元素？ –

我不認爲你的意思是「解除綁定」。我認爲你的意思是你只是想刪除應用於先前選擇的項目的樣式。如果您「解除綁定」，那麼您將無法重新選擇該項目。看我下面的例子。 – bygrace

是的，我的意思是刪除先前選定項目的樣式。 – user525146

如果我理解正確，那麼你要重置先前在點擊排設置的紅色。

如果是這樣，則點擊裏面你需要設置的所有其他爲默認的顏色，

var $tds = $("#index td"); 
    //.. 
    //.. 
    .click(function(){ 
     $tds.css({'background': '#ffffff', 
          'cursor': 'pointer'}); 

     $(this).css({ 'color': 'red'}); 
    });

或者正確的方法是有2個CSS類定義1.亮點2.選擇，然後添加/相應地刪除它們。

CSS：

.highlight { background: '#ffffff', cursor: 'pointer'} 
.selected { color: 'red'; }

JS：

var $tds = $("#index td"); 

    $tds.hover(
     function() { 
      $(this).addClass('highlight'); 
     }, function() { 
      $(this).removeClass('highlight'); 
     } 
    ).click(function(){ 
     $tds.removeClass('selected'); 
     $(this).addClass('selected'); 
    });

注：如果我沒有記錯的話這樣的事情通常適用於tr秒且不td小號

來源

2012-05-08 20:47:19

由於某些原因，addClass和removeClass都不應用樣式。 – user525146

@ user525146你有jQuery嗎？同時檢查是否有腳本錯誤。 –

是的，我有jquery包括，它正在爲其他風格等工作，它應用css而不是js addClass或removeClass，並沒有腳本錯誤 – user525146

我我不確定我是否完全理解這個問題，但我不知道hink您可能希望one()功能：以上

$("#foo").one("click", function(){ 
    alert("This will be displayed only once."); 
});

基本上等同於這樣做：

$("#foo").bind("click", function(e) { 
    alert("This will be displayed only once."); 
    $(this).unbind(e); 
});

來源

2012-05-08 20:49:53

我想你最好處理與CSS懸停事件和與JS的點擊。這裏是一個例子：http://jsfiddle.net/ZmcNN/1/

來源

2012-05-08 20:54:00 bygrace

由於某些原因，js不適用風格與點擊事件。我的函數在$（document）.ready（function（）{}）; – user525146

我能想到的唯一的事情就是你可以驗證你的選擇器是否與你試圖定位的元素匹配。 – bygrace

某些內聯樣式正在覆蓋應用的類樣式。我編輯了我的問題，我在Chrome控制檯中看到的 – user525146

mouseclick更改文本的顏色並解除以前點擊的脫機

回答

相關問題