Added Klasse mit Hilfe von JavaScript nicht funktioniert

Question

ich zwei Klassen bin Zugabe auf meinem Tisch mit Javascript, die CSS für die Klassen ist:

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

.selected { 
    opacity: 1; 
} 

was ich versuche, hier zu erreichen ist, dass mein Tisch im opacity: 0.5 schwindet und die ausgewählte Zelle wird mit der Klasse selected angewendet, die die ausgewählte Zelle hervorhebt.

Javascript Das verwendete ist:

$("#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"); 
}); 

jedoch aus irgendeinem Grund nach der fade-table Klasse Hinzufügen das Skript nicht die selected Klasse auf die td gilt. Der offensichtliche Grund, dass ich daran denken kann, ist, dass dies nicht die td darstellt, so versuchte auch $(this).closest("td").addClass("selected");. Dies scheint jedoch auch nicht zu funktionieren.

Irgendwelche Vorschläge, wie dies funktionieren könnte?

Answer 1

Wenn Sie möchten, "ausgewählt", um die <td> anzuwenden, die auf geklickt wurde, versuchen:

$("#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"); 
}); 

(oder etwas weniger hässlich). Die Idee ist, den Ereignisparameter zu verwenden, um das tatsächliche Ziel des Klicks zu finden.

Answer 2

Sie setzen die Deckkraft auf das falsche Element. fade-table wird auf die Zelle angewendet, aber ausgewählt wird auf die Zeile angewendet, so dass die Zelle immer noch auf 50% Deckkraft eingestellt ist.

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