Question

我有一个价格网格，它使用相对定位来移动一个字段，在overflow: hidden;的框下面。在这个字段中，有包含价格的绝对定位框。悬停此框时，上方和左侧的匹配值将更改颜色。为了实现这一点，使用jQuery切换类。这最初有效。

但是，移动网格后，类更改不再影响网格上方的块。在Chrome控制台中，我可以看到正在添加的类，但它没有应用css样式。该元素没有其他样式发生变化。

我100％确定没有其他样式规则影响元素，它只是在DOM被更改后停止响应类中的更改。

我可以以某种方式刷新DOM吗？

修改

我试图仅获取相关代码：

首先添加单元格：

$("#price_dates_cells").append("<div id='"+weekday[theBeginDate.getDay()]+"-"+theBeginDate.getDate()+"-"+(theBeginDate.getMonth()-1)+"' class='datecell' style='left: "+( Math.floor( difference / ( 3600 * 24 * 1000) ) * ( cellwidth ) )+"px'>"+weekday[theBeginDate.getDay()]+"<br>"+theBeginDate.getDate()+" "+yearmonth[theBeginDate.getMonth()]+"</div>");

切换课程：

var str_element = "#"+weekday[Bdate.getDay()]+"-"+Bdate.getDate()+"-"+(Bdate.getMonth()-1);
$(str_element).toggleClass("red");

和似乎导致问题的运动：

$('#price_grid').animate({"top": (( ( horizontalMovement ) * cellheight)) }, 'fast', 'linear');

Class not Applied http://img708.imageshack.us/img708/6491/classnotapplied.png

Answer 1

CSS始终将priority提供给last statement。因此，如果您要覆盖.datecell div color，请写下red class after，请按以下方式编写：

.datecell{
  background-color:grey;
}
.red{
 background-color:red
}

这种情况发生在你的情况下

但是

如果您不希望red覆盖.datecell，请按以下方式编写：

.red{
     background-color:red
    }
.datecell{
      background-color:grey;
    }

Answer 2

哎呀，我现在感觉很蠢。我已经更改了附加元素的id结构以确保它们是唯一的，但我忘了改变必须防止双重添加日期单元格的检查。该元素确实接收了类，并应用了它的样式，但是由一个相同的元素覆盖，没有收到类。

jQuery逻辑上只将类添加到具有指定id的第一个元素，并且由于它是首先创建的，因此它将位于副本下面。

如果我的截图有点不同，我肯定有人会注意到：D

感谢大家的回答！

为什么在dom更改后忽略类的更改？

2 个答案: