Добавлен класс Использование JavaScript не работает

Question

Я добавляю два класса с помощью JavaScript на моем столе, CSS для классов:

//using less 
.fade-table { 
    background-color: #fff; 
    opacity: 0.5; 
    &:hover { 
     opacity: 1; 
    } 
} 

.selected { 
    opacity: 1; 
} 

, что я пытаюсь достичь здесь является то, что мой стол блекнет на opacity: 0.5 и выбранная ячейка применяется с классом selected, который выделяет выбранную ячейку.

используется браузером:

$("#pending_states table tr").live("click",function(){ 
    $("#pending_states table").css({width: "140px"}); 
    $("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").addClass("fade-table"); 
    $("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").css({width: "140px"}); 
    $("#pending_states").animate({ marginLeft: "4px"}, 200); 
    $(this).addClass("selected"); 
}); 

Однако по какой-то причине после добавления fade-table класса сценарий не применит selected класса к td. Очевидная причина, по которой я могу думать, состоит в том, что это не означает td, так что тоже попробовал $(this).closest("td").addClass("selected");. Однако это тоже не работает.

Любые предложения о том, как это может работать?

Answer 1

Если вы хотите применить "выбранный" в <td>, которая была нажата, попробуйте:

$("#pending_states table tr").live("click",function(e){ 
    $("#pending_states table").css({width: "140px"}); 
    $("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").addClass("fade-table"); 
    $("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").css({width: "140px"}); 
    $("#pending_states").animate({ marginLeft: "4px"}, 200); 
    ($(e.target).is('td') ? $(e.target) : $(e.target).closest('td')).addClass("selected"); 
}); 

(или что-то менее уродливым). Идея состоит в том, чтобы использовать параметр события для поиска фактической цели клика.

Answer 2

Вы устанавливаете непрозрачность на неправильном элементе. fade-table применяется к ячейке, но выбранный применяется к строке, поэтому ячейка будет по-прежнему установлена ​​с непрозрачностью 50%.

http://jsfiddle.net/UNgbh/2/