jquery - jquery悬停同一类的多个元素

Question

我有一张一年中 12 个月的表（一月到十二月）

然后我将一些月份组合在一起，即：jan to apr = group1，mar to jun = group2

所以我想做的就是改变所有具有相同组名的项目的背景颜色。

$('.group1').hover(function() {
    $(this).addClass('tbl_navGroupHover');
}, function() {
    $(this).removeClass('tbl_navGroupHover');
});

$('.group2').hover(function() {
    $(this).addClass('tbl_navGroupHover');
}, function() {
    $(this).removeClass('tbl_navGroupHover');
});

http://jsfiddle.net/Q49Rd/1/

更新，我选择了这个解决方案 - tx 为您提供帮助：

<script>";
for ($i = 1; $i < 13; $i++) {
echo "$('.group$i').hover(function() {
    $('.group$i').addClass('tbl_navGroupHover');
}, function () {
    $('.group$i').removeClass('tbl_navGroupHover');
});";
}
echo "</script>";

Answer 1

替换this为组类名，也可以使用toggleClassmethod。

$('.group1').hover(function() {
    $('.group1').toggleClass('tbl_navGroupHover');
});

$('.group2').hover(function() {
    $('.group2').toggleClass('tbl_navGroupHover');
});

http://jsfiddle.net/5cAfR/

请注意，您尚未在小提琴中加载 jQuery。

Answer 2

不要使用thisinsted 的类名来进行所有更改

$(this).addClass('tbl_navGroupHover');

应该

$(".group1").addClass('tbl_navGroupHover');

Answer 3

不确定这是否会有所不同，但在 jquery 文档中，“.hover”函数同时采用“handlerIn”和“handlerOut”函数。

您可以尝试以下方法：

$('.group1').hover(function() {
    $('.group1').addClass('tbl_navGroupHover');
}, function() {
     $('.group1').removeClass('tbl_navGroupHover');
});

$('.group2').hover(function() {
    $('.group2').addClass('tbl_navGroupHover');
}, function () {
    $('.group2').removeClass('tbl_navGroupHover');
});

不确定这是否会有所作为。您可能只能指定一个功能并摆脱它。这将在其中一个项目悬停时更改背景颜色，然后在您离开该项目时移除颜色。

希望这可以帮助。