jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 在一组行中悬停突出显示效果大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有@L_674_1@很大的表,按数据属性分组,如下所示:

<table>
    <tr data-group="666"><td></td></tr>
    <tr data-group="666"><td></td></tr>

    <tr data-group="2"><td></td></tr>
    <tr data-group="2"><td></td></tr>

    <tr data-group="XXXX"><td></td></tr>
    <tr data-group="XXXX"><td></td></tr>
</table>

我事先并不知道可能的团体的价值(可能超过50组).它们是动态生成的.

现在我使用jQuery创建悬停突出显示@L_674_5@,但有点慢.
我想知道是否有任何方法可以用CSS做到这一点.

这就是我现在正在使用的:

$('tr').live('hover',function() {
        $('tr[data-group="'+$(this).data('group')+ '"]').toggleClass('hover');
});

工作演示:http://jsfiddle.net/MW69S/

解决方法

遗憾的是,基于使用该属性选择器悬停在一行上,无法通过CSS本地突出显示其他行.你需要涉及某种类型的javascript才能这样做.

但是,我建议通过将调用更改为以下内容来提高现有jQuery的性能

$('tr[data-group]').on('hover',function() {
  var t = $(this);
  t.siblings('[data-group='+t.attr('data-group')+']').toggleClass('hover');
});

这应该加快整个过程,因为你增加了选择器的特异性,从而减少了jQuery的挖掘,以便找到你正在寻找的元素.

大佬总结

以上是大佬教程为你收集整理的jquery – 在一组行中悬停突出显示效果全部内容,希望文章能够帮你解决jquery – 在一组行中悬停突出显示效果所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。