javascript - Jquery脚本是否有可能变得更小或更高效

Question

好的，我有一个包含六个图标的网页，每个图标后跟一个标题和按钮。目前我有它的工作方式，当你将鼠标悬停在 img-1 上时，header-1 和 button-1 都悬停在相同的颜色上，以此类推。我想知道我的 jquery 还是新手，还没有以任何方式掌握它，但我提出了我想要的每一个更改，我想知道是否有一种方法可以巩固它，或者如果我想更改它但仍然可以使它更容易它悬停并将颜色更改为相应的 div

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

非常感谢任何提示或技巧，以帮助我在我写的任何 future 网站

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");

});

});

Answer 1

我看不出有任何理由不为所有这些 使用 CSS。如果您的目标是悬停的 parent 的 child ，您可以根据自己的喜好设置样式。例如:

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

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

http://jsfiddle.net/qk53a5q4/