jquery - 我怎样才能最小化悬停图像和显示内容的代码。查询

Question

我的代码非常重复。我只想最小化它，但我不知道该怎么做。一切正常，我只是希望我的代码不要那么重复。

$(".thumbs").hover(function() {
  $(".project__description").removeClass("hidden__");
  $(".project__description__small").removeClass("hidden__");    
}, function() {
  $(".project__description").addClass("hidden__");
  $(".project__description__small").addClass("hidden__");
});

$(".thumbs2").hover(function() {
  $(".project__description2").removeClass("hidden__");
  $(".project__description__small2").removeClass("hidden__");
}, function() {
  $(".project__description2").addClass("hidden__");
  $(".project__description__small2").addClass("hidden__");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container__projects" id="commercial">
  <div class="row">
    <div class="col-md-6 animated slideInLeft thumbs">
      <img class="project__images" src="img/commercial/amadeus/a1.jpg" />
      <span class="project__description hidden__">Amadeus Headquarters</span><br>
      <span class="project__description__small hidden__">Interior Design & Supply Services</span>
    </div>
    <div class="col-md-6 animated slideInRight thumbs2">
      <img class="project__images" src="img/commercial/nadine/a1.jpg" />
      <span class="project__description2 hidden__">Nadine Jewellery</span><br>
      <span class="project__description__small2 hidden__">Interior Design Supply & Execution</span>
    </div>
  </div>
</div>

Answer 1

为了使用 jQuery 简化这一点，您可以首先将选择器与逗号组合在一起。然后你可以在元素的所有实例上放置公共(public)类，即。没有 2 或其他后缀，然后在 jQuery 选择器中使用这些类。

要仅影响悬停在 .thumb 中的 span 元素，请使用对当前元素的 this 引用以及 find() 来遍历 DOM，像这样:

$(".thumbs").hover(function() {
  $(this).find(".project__description, .project__description__small").removeClass("hidden__");
}, function() {
  $(this).find(".project__description, .project__description__small").addClass("hidden__");
});

.hidden__ {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container__projects" id="commercial">
  <div class="row">
    <div class="col-md-6 animated slideInLeft thumbs">
      <img class="project__images" src="img/commercial/amadeus/a1.jpg" />
      <span class="project__description hidden__">Amadeus Headquarters</span><br>
      <span class="project__description__small hidden__">Interior Design &amp; Supply Services</span>
    </div>
    <div class="col-md-6 animated slideInRight thumbs">
      <img class="project__images" src="img/commercial/nadine/a1.jpg" />
      <span class="project__description hidden__">Nadine Jewellery</span><br>
      <span class="project__description__small hidden__">Interior Design Supply &amp; Execution</span>
    </div>
  </div>
</div>

话虽这么说，但值得注意的是，单独使用 CSS 可以更有效地完成此操作:

.hidden__ {
  display: none;
}

.thumbs:hover .project__description,
.thumbs:hover .project__description__small {
  display: inline;
}

<div class="container__projects" id="commercial">
  <div class="row">
    <div class="col-md-6 animated slideInLeft thumbs">
      <img class="project__images" src="img/commercial/amadeus/a1.jpg" />
      <span class="project__description hidden__">Amadeus Headquarters</span><br>
      <span class="project__description__small hidden__">Interior Design &amp; Supply Services</span>
    </div>
    <div class="col-md-6 animated slideInRight thumbs">
      <img class="project__images" src="img/commercial/nadine/a1.jpg" />
      <span class="project__description hidden__">Nadine Jewellery</span><br>
      <span class="project__description__small hidden__">Interior Design Supply &amp; Execution</span>
    </div>
  </div>
</div>