通过选择多个 td 类在悬停时添加和删除类？答案

【问题标题】：Add and remove class on hover with selecting multiple td classes?通过选择多个 td 类在悬停时添加和删除类？
【发布时间】：2017-07-17 18:14:21
【问题描述】：

谁能帮我我的网站是：zenart website。应该发生的是在表格的每一列中添加一个悬停时的突出显示类。我已经为每个对应的每个 td 添加了相同的类以制作列。

这是我的 jQuery 代码：

$(document).ready(function() {          
var a = $

a('.column1, .column2, .column3, .column4, .column5').hover(
   function(){ a(this).addClass('highlight') },
   function(){ a(this).removeClass('highlight') })  
});

【问题讨论】：

检查这个:) stackoverflow.com/questions/1143614/…
它会抛出什么错误？？
在网站上，类名是.1column, .2column...，而不是.column1, .column2,。你最好给你的桌子一个 id 并使用$.('#tableId td')

标签： jquery hover

【解决方案1】：

这应该适合你。您必须从所有类中提取类的名称，并查看当前选择了哪个类xcolumn。然后将样式应用于该类。

$(".1column, .2column, .3column, .4column, .5column").hover(
        function () {
            var classes = $(this).attr('class');
            var n = classes.indexOf("column");
            var className = "." + classes.substring((n-1),(n+7));
            $(className).addClass("highlight");
        },
        function () {
            var classes = $(this).attr('class');
            var n = classes.indexOf("column");
            var className = "." + classes.substring((n-1),(n+7));
            $(className).removeClass("highlight");
        }
    );

【讨论】：

我看到您将要添加的类的名称从“highlight”更改为“hover”。请相应更改。

【解决方案2】：

我看到你的班级名称是 1column 而不是 column1.. 所以选择器应该是

 a('.1column, .2column, .3column, .4column, .5column').hover({....

【讨论】：

【解决方案3】：

$("[class*=column]").hover( function() {

指定每个元素可能很困难。您可以*= 匹配该元素的类与column。

【讨论】：

【解决方案4】：

你可以试试这个：

$('nav li').hover(function(){
   $(this).addClass('highlight');
},function(){
   $(this).removeClass('highlight');
});

【讨论】：