Javascript/Jquery 高效放大编码

Question

在我正在处理的站点中，有许多图像在您将鼠标悬停在它们上面时会放大。按照目前的情况，每个元素都有一个唯一的类，用于标识此时应放大的元素。我想要做的是拥有一个可以单独应用于所有元素的简单功能，因此我没有大约 17 个额外的类和大量的 javascript 文件。在示例中，当您将鼠标悬停在特定列上时，列内的图片将放大。

Javscript 代码:

$('.webDesignServices').hover(function() {
    $(".webDesignPicture").addClass('transition');
}, function() {
    $(".webDesignPicture").removeClass('transition');
});

$('.graphicDesignServices').hover(function() {
    $(".graphicDesignPicture").addClass('transition');
}, function() {
    $(".graphicDesignPicture").removeClass('transition');
});

CSS 代码:

.webDesignPicture {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}

.graphicDesignPicture {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}
.transition {
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

HTML 代码(为了更清楚，已排除 2 个)

        <div class = "container-fluid services">
            <div class = "row">
                <div class = "col-md-3 webDesignServices">
                    <img class = "img-responsive displayed servicePicture webDesignPicture" src = "img/globe.png" alt = "webdesign" style = "height: 100px">
                    <h2 class = "serviceTitles"> Web Design </h2>
                    <p class = "serviceDescription"> Cardiff's Premier Web Design. Full Web Solutions For Any Sized Business.</p>
                    <button class = "serviceButton displayed" id = "web-design" data-id="#web-design-slide"> Find Out More!</button>
                    <div id = "paddingSpace"></div>
                </div>
                <div class = "col-md-3 graphicDesignServices">
                    <img class = "img-responsive displayed servicePicture graphicDesignPicture" src = "img/pencil.png" alt = "graphicdesign" style = "height: 100px">
                    <h2 class = "serviceTitles"> Graphic Design </h2>
                    <p class = "serviceDescription"> Anything From Flyers And Business Cards All The Way To Product Design.</p>
                    <button class = "serviceButton displayed" id = "graphic-design" data-id="#graphic-design-slide"> Find Out More!</button>
                    <div id = "paddingSpace"></div>
                </div>                                    
            </div>
        </div>

Answer 1

为所有这些添加一个名为 enlargeable 或类似名称的类。

现在您可以:

$(".enlargeable").hover(function() {
  $(this).toggleClass("transition");
});

$(".enlargeable").hover(function() {
  $(this).toggleClass("transition");
});

.transition {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
.enlargeable {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid services">
  <div class="row">
    <div class="col-md-3 webDesignServices">
      <img class="img-responsive displayed servicePicture webDesignPicture enlargeable" src="img/globe.png" alt="webdesign" style="height: 100px">
      <h2 class="serviceTitles"> Web Design </h2>
      <p class="serviceDescription">Cardiff's Premier Web Design. Full Web Solutions For Any Sized Business.</p>
      <button class="serviceButton displayed" id="web-design" data-id="#web-design-slide">Find Out More!</button>
      <div id="paddingSpace"></div>
    </div>
    <div class="col-md-3 graphicDesignServices">
      <img class="img-responsive displayed servicePicture graphicDesignPicture enlargeable" src="img/pencil.png" alt="graphicdesign" style="height: 100px">
      <h2 class="serviceTitles"> Graphic Design </h2>
      <p class="serviceDescription">Anything From Flyers And Business Cards All The Way To Product Design.</p>
      <button class="serviceButton displayed" id="graphic-design" data-id="#graphic-design-slide">Find Out More!</button>
      <div id="paddingSpace"></div>
    </div>
  </div>
</div>