Javascript jQuery添加/删除类或切换类

我只是想知道在mouseenter/mouseleave状态下使用jquery切换类或添加和删除类的最佳实践。两者似乎都很好，我只是不确定哪一个最好

多谢各位

$（'#image1'）.mouseenter（函数（）{
$（'#image1'）。toggleClass（'transform'）；
$（'#image1.images color overlay'）.toggleClass（'transparent'）；
$（'#image1.images text'）.toggleClass（'show-images-text'）；
});
$（'#image1'）.mouseleave（函数（）{
$（'#image1'）。toggleClass（'transform show images text'）；
$（'#image1.images color overlay'）.toggleClass（'transparent'）；
$（'#image1.images text'）.toggleClass（'show-images-text'）；
});
。图像颜色覆盖{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：rgba（0,0,0,0.4）；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.图像{
宽度：33.333%；
浮动：左；
溢出：隐藏；
位置：相对位置；
}
#图1{
背景图像：url（“http://placehold.it/1000x320");
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
宽度：100%；
高度：100px；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.图像和文本{
文本对齐：居中；
宽度：100%；
位置：绝对位置；
底部：-20px；
颜色：#fff；
字体大小：10px；
线高：正常；
-webkit转换：所有1；
过渡：所有1；
}
.显示图像和文本{
-webkit转换：所有1；
过渡：所有1；
底部：20px；
}
.变换{
-webkit转换：比例（1.25）；
转换：比例（1.25）；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.透明{
背景色：rgba（0,0,0,0）！重要；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}

隐藏文本
您的代码在技术上很好，但是您可以将其缩短为只使用
hover（）
方法，因为您提供的函数将被
mouseenter
和
mouseleave
事件调用

您还可以在函数中使用
this
引用来保存DOM访问，还可以将从
$（this）
创建的jQuery对象缓存在变量中以供重用。试试这个：


$（'#image1'）。悬停（函数（）{
var$image=$（this.toggleClass（'transform'）；
$image.find（'.images color overlay'）.toggleClass（'transparent'）；
$image.find（'.images-text'）.toggleClass（'show-images-text'）；
});
。图像颜色覆盖{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：rgba（0,0,0,0.4）；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.图像{
宽度：33.333%；
浮动：左；
溢出：隐藏；
位置：相对位置；
}
#图1{
背景图像：url（“http://placehold.it/1000x320");
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
宽度：100%；
高度：100px；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.图像和文本{
文本对齐：居中；
宽度：100%；
位置：绝对位置；
底部：-20px；
颜色：#fff；
字体大小：10px；
线高：正常；
-webkit转换：所有1；
过渡：所有1；
}
.显示图像和文本{
-webkit转换：所有1；
过渡：所有1；
底部：20px；
}
.变换{
-webkit转换：比例（1.25）；
转换：比例（1.25）；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.透明{
背景色：rgba（0,0,0,0）！重要；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}

隐藏文本
在您的情况下，
切换类是最基本的做法

在内部，它也在做同样的事情，如果类存在，则删除它，如果不存在，则添加它。亲自查看，转到此处并搜索
toggleClass

// Check each className given, space separated list
if (self.hasClass(className)) {
  self.removeClass(className);
} else {
  self.addClass(className);
}

很多关于风格的问题在这里被否决了，因为这似乎归结于偏好。但这里有一种方法可以做到这一点，没有JavaScript，只有CSS，一些人可能认为更有效。

。图像颜色覆盖{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：rgba（0,0,0,0.4）；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.图像{
宽度：33.333%；
浮动：左；
溢出：隐藏；
位置：相对位置；
}
#图1{
背景图像：url（“http://placehold.it/1000x320");
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
宽度：100%；
高度：100px；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.图像和文本{
文本对齐：居中；
宽度：100%；
位置：绝对位置；
底部：-20px；
颜色：#fff；
字体大小：10px；
线高：正常；
-webkit转换：所有1；
过渡：所有1；
}
#图1：悬停{
-webkit转换：比例（1.25）；
转换：比例（1.25）；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
#图像1：悬停。图像文本{
-webkit转换：所有1；
过渡：所有1；
底部：20px；
}
.图像颜色覆盖：悬停{
背景色：rgba（0,0,0,0）！重要；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}

隐藏文本
非常感谢您提供的信息和帮助。将使用鼠标悬停函数，而不是鼠标进入/离开，变量是一个很好的主意，它将有助于缩短代码。再次感谢Hanks非常感谢您的输入非常感谢这一点，我不想走完整的css路线的唯一原因（在可能的情况下，我会做大多数事情）是因为我将在悬停状态上使用jquery“if”语句来转换为移动设备上的点击状态。使用悬停状态时，我总是担心冲突