Question

我正在整理一个简洁的jQuery matrix，因为我很难在jQuery网站上浏览，而且备忘单似乎也没有提供我想要的东西。

以下是我如何突出显示行：

$('.eq').hover(function() {
    $('.eq').toggleClass('highlight');
});
$('.is').hover(function() {
    $('.is').toggleClass('highlight');
});

问：我怎样才能编写一个函数，说“将所有内容与正在盘旋的内容相交”？类似的东西：

function toggle(that){
    $(that.className).toggleClass('highlight');
}

Answer 1

您知道tables can have multiple tbody elements吗？

只需在不同的tbody元素中包装行集。然后我们可以使用：

$('tbody').hover(function() {
    $(this).toggleClass('highlight');
});

在较新的浏览器中，只能使用CSS来完成：

tbody {
    /* Normal style */
}

tbody:hover {
    /* Highlighted style */
}

Answer 2

“我如何编写一个函数，说明”将所有内容与正在盘旋的内容相交“？

元素可以有多个类，您是否希望使用每个元素执行此操作？更好的方法可能是为所需的元素编写插件，如下所示：

$.fn.highlightClass = function() {
  return this.hover(function() {
    $("."+this.className.split(" ").join(",.")).toggleClass("highlight");
  });
};

然后你会在你关心的元素上调用它，例如：

$(".eq, .is").highlightClass();

如果您有一个class="eq test"元素，则会将其更改为".eq,.test"选择器，并在所有这些元素上切换highlight类。只需将.join()调用更改为.join(".")，如果您只想突出显示所有所有元素类的元素，而不是 any < / em>的类......就像我上面的那样。

Answer 3

如果您只为悬停的HTML元素分配一个类，请使用稍微更改的版本：

function toggle(that){
    $("." + that.className).toggleClass('highlight');
}

使用jQuery突出显示多行

3 个答案: