javascript - 缩短重复元素的Javascript

Question

我最近制作了一些小部件，将鼠标悬停在整个 div 上会将类添加到同一父 div 中的其他 div。

我使用以下 JavaScript（使用 jQuery）来做到这一点，但是我有 4 个类似的主 div，所以我只重复了 JS 4 次（类名略有变化）。

有没有办法重写 JS 以使其更紧凑，因为它包含很多重复？

PS 如果不是很明显，我是一个 JS 菜鸟。;)

$('.dts-fb-hover').hover(function() {
  $(this).closest('.dts-fb1').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbw-bz1').addClass('hover');
}, function() {
  $(this).closest('.dts-fb1').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbw-bz1').removeClass('hover');
});

$('.dts-fb-hover').hover(function() {
  $(this).closest('.dts-fb2').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbn-bz1').addClass('hover');
}, function() {
  $(this).closest('.dts-fb2').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbn-bz1').removeClass('hover');
});

$('.dts-fb-hover').hover(function() {
  $(this).closest('.dts-fb3').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbn-bz1').addClass('hover');
}, function() {
  $(this).closest('.dts-fb3').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbn-bz1').removeClass('hover');
});

$('.dts-fb-hover').hover(function() {
  $(this).closest('.dts-fb4').find('.dts-fb-bzh,#dts-fb-cd-wrap,.dts-fb-ha,.dts-fb-trap,.dts-fbw-bz1').addClass('hover');
}, function() {
  $(this).closest('.dts-fb4').find('.dts-fb-bzh,#dts-fb-cd-wrap,.dts-fb-ha,.dts-fb-trap,.dts-fbw-bz1').removeClass('hover');
});

#dts-fb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.dts-fb-trap {
  position: absolute;
  top: 15px;
  left: 0;
  color: #ffffff;
  border-bottom: 25px solid #000000;
}

.dts-fb-trap.hover {
  color: #bf0000;
  border-bottom: 25px solid #bcbcbc;
}

.dts-fb-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  text-align: center;
}

.dts-fb-text.hover {
  transform: scale(1.05) translateY(-50%);
}

.dts-fb-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 3;
}

.dts-fb-ha {
  position: absolute;
  bottom: 10px;
  right: 25px;
  z-index: 2;
}

.dts-fb-ha.hover {
  right: 10px;
}

.dts-fb1,
.dts-fb2,
.dts-fb3,
.dts-fb4 {
  width: 500px;
  height: 220px;
  position: relative;
  z-index: 1;
}

.dts-fbw-bz1,
.dts-fbn-bz1 {
  background-color: #202020;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.dts-fbw-bz1.hover,
.dts-fbn-bz1.hover {
  background-color: #909090;
}

.dts-fb-bzh.hover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #404040;
  opacity: 0.4;
  z-index: -2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dts-fb">
  <div class="dts-fb1">
    <div class="dts-fb-trap"> Title </div>
    <h3 class="dts-fb-text">Some content here..</h3>
    <div class="dts-fbw-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
  <div class="dts-fb2">
    <div class="dts-fb-trap">
      <h3 class="dts-fb-trap-title">Title2</h3>
    </div>
    <h3 class="dts-fb-text">Some content here pt2..</h3>
    <div class="dts-fbn-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
  <div class="dts-fb3">
    <div class="dts-fb-trap">
      <h3 class="dts-fb-trap-title">Title3</h3>
    </div>
    <h3 class="dts-fb-text">Some content here pt3..</h3>
    <div class="dts-fbn-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
  <div class="dts-fb4">
    <div class="dts-fb-trap">
      <h3 class="dts-fb-trap-title">Title4</h3>
    </div>
    <h3 class="dts-fb-text">Some content here pt4..</h3>
    <div class="dts-fbw-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
</div>

标签： javascriptjqueryhtml

Answer 1

您可以将其添加到“主”元素一次，然后使用 CSS 将内容应用于每个子元素，而不是在悬停时为所有子元素添加悬停类。

$('.dts-fb-hover').hover(function() {
  $(this).closest('.dts-fb').addClass('hover');
}, function() {
  $(this).closest('.dts-fb').removeClass('hover');
});

#dts-fb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.dts-fb-trap {
  position: absolute;
  top: 15px;
  left: 0;
  color: #ffffff;
  border-bottom: 25px solid #000000;
}

.hover .dts-fb-trap {
  color: #bf0000;
  border-bottom: 25px solid #bcbcbc;
}

.dts-fb-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  text-align: center;
}

.hover .dts-fb-text {
  transform: scale(1.05) translateY(-50%);
}

.dts-fb-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 3;
}

.dts-fb-ha {
  position: absolute;
  bottom: 10px;
  right: 25px;
  z-index: 2;
}

.hover .dts-fb-ha {
  right: 10px;
}

.dts-fb {
  width: 500px;
  height: 220px;
  position: relative;
  z-index: 1;
}

.dts-fbw-bz1,
.dts-fbn-bz1 {
  background-color: #202020;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hover .dts-fbw-bz1,
.hover .dts-fbn-bz1 {
  background-color: #909090;
}

.hover .dts-fb-bzh {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #404040;
  opacity: 0.4;
  z-index: -2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dts-fb">
  <div class="dts-fb">
    <div class="dts-fb-trap"> Title </div>
    <h3 class="dts-fb-text">Some content here..</h3>
    <div class="dts-fbw-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
  <div class="dts-fb">
    <div class="dts-fb-trap">
      <h3 class="dts-fb-trap-title">Title2</h3>
    </div>
    <h3 class="dts-fb-text">Some content here pt2..</h3>
    <div class="dts-fbn-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
  <div class="dts-fb">
    <div class="dts-fb-trap">
      <h3 class="dts-fb-trap-title">Title3</h3>
    </div>
    <h3 class="dts-fb-text">Some content here pt3..</h3>
    <div class="dts-fbn-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
  <div class="dts-fb">
    <div class="dts-fb-trap">
      <h3 class="dts-fb-trap-title">Title4</h3>
    </div>
    <h3 class="dts-fb-text">Some content here pt4..</h3>
    <div class="dts-fbw-bz1"></div>
    <div class="dts-fb-bzh"></div>
    <div class="dts-fb-ha"></div>
    <a href="#">
      <div class="dts-fb-hover"></div>
    </a>
  </div>
</div>