Question

我在我的桌子上使用javascript添加两个类，类的css为：

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

.selected {
    opacity: 1;
}

我想在这里实现的是，我的表格在opacity: 0.5处消失，所选单元格应用了selected类，突出显示所选单元格。

正在使用的javascript是：

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

（或者不那么丑陋的东西）。我们的想法是使用event参数来查找点击的实际目标。

Answer 2

您正在错误的元素上设置不透明度。 fade-table应用于单元格，但已选择应用于该行，因此单元格仍将设置为50％不透明度。

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

使用javascript无法正常添加课程

2 个答案: