Question

我有一个javaScript函数，它循环遍历可变数量的迭代并将HTML吐出到DOM /网页。因此在循环之后它填充了以下div：

  <div class="energyRowContainer" id="energyRowContainer">

  </div>

像这样......

<div class="energyRowContainer" id="energyRowContainer">

<div id="energyRow0" class="energyRow">
<div class="energyTypeHead"> 1.2.2012 </div><div class="energyUnitMWH"> 93 </div><div class="energyUnitT"> 174 </div><div class="energyUnitM3_1"> 6594 </div><div class="energyUnitM3_2"> 116 </div><div class="energyUnitM3_3"> 34162 </div><div class="energyUnitM3_4"> 2625 </div><div class="energyUnitM3_5"> 17886 </div> <div class="energyUnitM3_6"> 21 </div>
</div>

<div id="energyRow1" class="energyRow">
<div class="energyTypeHead"> 1.2.2012 </div><div class="energyUnitMWH"> 93 </div><div class="energyUnitT"> 174 </div><div class="energyUnitM3_1"> 6594 </div><div class="energyUnitM3_2"> 116 </div><div class="energyUnitM3_3"> 34162 </div><div class="energyUnitM3_4"> 2625 </div><div class="energyUnitM3_5"> 17886 </div> <div class="energyUnitM3_6"> 21 </div>
</div>

<div>

现在我想使用Jquery或CSS来改变整行的背景颜色（class =“energyRow”），但只是创建一个energyRow：hover不起作用，因为我将鼠标悬停在子div上。 ..我曾经考虑过这样使用，但我无处可寻......任何想法都没有？

$('#energyRowContainer > .energyRow, ').hover(function() {
    $(this).parent().toggleClass('name_of_a_hover_class');
});

Answer 1

我相信您的问题是您是动态地将元素添加到DOM但不使用.delegate()等事件委托绑定方法。这可以通过CSS完成（这对性能有好处，尽管通过JS向元素添加类不会产生更多的开销）：

#energyRowContainer .energyRow:hover {
    background : yellow;
}

以下是演示：http://jsfiddle.net/zNWGL/

此外，您距离如此之近，您需要做的只是从您的选择中删除.parent()。以下是.parent()：http://jsfiddle.net/zNWGL/1/

代码的演示

Answer 2

这有帮助吗？

$('#energyRowContainer').find('.energyRow').hover(function() {
    $(this).parent().addClass('name_of_a_hover_class'); // On hover
}, function() {
    $(this).parent().removeClass('name_of_a_hover_class'); // On not hover
});

不要忘记在div或者准备好的事件之后添加它。

Answer 3

您的代码中的问题是您正在使用$(this).parent()选择您在其上悬停的元素的父级并在其上切换类。

您只需使用$(this)，它将指向您悬停的容器并在其上切换类。

此外，由于元素是动态添加的，因此您应该在delegate上使用on（在jQuery 1.7中添加）

使用delegate：

$('#energyRowContainer').delegate('.energyRow', 'hover', function() {
    $(this).toggleClass('name_of_a_hover_class');
});

使用on：

$('#energyRowContainer').on('hover', '.energyRow', function() {
    $(this).toggleClass('name_of_a_hover_class');
});

但是你可以通过像这样的纯CSS来实现这种行为。

.energyRow:hover {
    background : whateverColor;
}

.delegate()参考 - http://api.jquery.com/delegate/
.on()参考 - http://api.jquery.com/on/

悬停时突出显示整行

3 个答案: