Jquery脚本是否可以使更小或更高效

Jquery script is it possible to make smaller or more effecient

本文关键字：高效 可以使 脚本 是否 Jquery      更新时间：2023-09-26

好的，所以我有一个网页，里面有六个图标，每个图标都有一个标题和按钮。目前，当您将鼠标悬停在img-1，标题-1和按钮-1上时，我将其工作在相同的颜色上，依此类推。我想知道我的 jquery 我仍然是新的并且还没有以任何方式掌握它，但我喊出了我想要的每一个更改，我想知道是否有办法巩固它或让它更容易，如果我想改变它但仍然让它悬停并将颜色更改为相应的div

我在jfiddle上设置了一个片段，正如您在jquery列表中看到的那样，我有一长串做同样事情的事情

感谢任何提示或技巧，将不胜感激，以帮助我将来编写的任何网站

http://jsfiddle.net/udegrbnr/

<div style="width:50%;float:left;">
<div class="container-1">
<div class="visible-1 upgradea-1 upgradea imgnone-1"><img     src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 upgradea-1 upgradea otherimg-1"><img src="http://placehold.it/250/db232b/000000" alt=""></div>
</div>
<h3 class="upgradea upgrade otherimg" style="text-align: center;">Upgrade Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-1 buttonshadow-no button-upgrade otherimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div>    </div>
<div style="width:30%;float:left;">
<div class="container-1">
<div class="visible-1 contracta contractnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 contracta contractimg-1"><img src="http://placehold.it/250/344da1/000000" alt=""></div>
</div>
<h3 class="contracta contractimg" style="text-align: center;">Contract End&nbsp;Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-3 buttonshadow-no contracta contractimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div></div></div>

这是我为 jQuery 准备的所有 6 个div，因为我觉得它很多，希望可以简化

就像我看到"this"命令一样，但不知道是否可以应用它

$(function(){
     $(".upgradea , .button-upgrade").hover(function(){
   $(".upgradea , .button-upgrade").toggleClass("changecolor");
 });
    $(".button-upgrade-1").hover(function(){
    $(".button-upgrade-1").toggleClass("changecolor-1");
 });
  $(".flexa ").hover(function(){
   $(".flexa").toggleClass("changecolor-2");
});
 $(".contracta ").hover(function(){
   $(".contracta").toggleClass("changecolor-3");
});
 $(".mileagea ").hover(function(){
  $(".mileagea").toggleClass("changecolor-4");
 });
 $(".warrantya").hover(function(){
    $(".warrantya").toggleClass("changecolor-5");
 });
   $(".otherimg").hover(function(){
    $(".otherimg-1").toggleClass("changeimg");
 });
 $(".otherimg").hover(function(){
  $(".imgnone-1").toggleClass("hidden-1");
 });
   $(".fleximg").hover(function(){
   $(".fleximg-1").toggleClass("changeimg");
 });
 $(".fleximg").hover(function(){
    $(".flexnone-1").toggleClass("hidden-1");
});
   $(".contractimg").hover(function(){
   $(".contractimg-1").toggleClass("changeimg");
});
 $(".contractimg").hover(function(){
    $(".contractnone-1").toggleClass("hidden-1");
});

}）;

我认为没有任何理由不使用CSS来完成所有这些工作。如果您定位到悬停父级的子项，则可以根据需要设置其样式。例如：

.parent:hover h3, .parent:hover .child a {
   color: red;
}
这个CSS

绝对可以进一步清理，有很多多余的CSS规则和不必要的容器，我只是不想偏离你提供的示例太远。

http://jsfiddle.net/qk53a5q4/

是的，重新考虑你的 CSS。

与其为每个悬停/changeimg/changecolor 状态设置一个特定的类，不如有一个类来说明事物是什么，然后为每个状态提供一个类。

.HTML：

<button class="button-1 hover">Button 1</button>
<button class="button-2 hover">Button 2</button>

.CSS：

.button-1.hover { /* styles */ }
.button-2.hover { /* styles */ }

j查询：

$('.button-1, .button-2').hover(function() {
    $(this).toggleClass('hover');
});
相关文章：