Вопрос:

Укорочение Javascript для повторяющихся элементов

javascript jquery html

64 просмотра

2 ответа

23 Репутация автора

Недавно я создал несколько виджетов, в которых при наведении курсора на весь div добавляются классы к другим div-элементам в том же родительском div.

Для этого я использовал следующий JavaScript (используя jQuery), однако у меня есть 4 аналогичных основных деления, поэтому я просто повторил 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>

Автор: mumer91 Источник Размещён: 11.08.2019 08:02

Ответы (2)


1 плюс

1425 Репутация автора

Решение

Вы можете пройти через DOM, чтобы найти родителя, divа затем использовать его, чтобы найти элементы, которые вы хотите стилизовать.

Добавление класса, не являющегося дочерним, для указанного родителя - это нормально, так что вы можете искать оба, .dts-fbw-bz1и .dts-fbn-bz1если один из них не найден, он будет пропущен, ошибки не будет.

$('.dts-fb-hover').hover(function(){
    $(this).parent('a').parent('div').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbw-bz1,.dts-fbn-bz1').addClass('hover');
}, function(){
    $(this).parent('a').parent('div').find('.dts-fb-bzh,.dts-fb-text,.dts-fb-ha,.dts-fb-trap,.dts-fbw-bz1,.dts-fbn-bz1').removeClass('hover');
});
Автор: akaBase Размещён: 11.08.2019 11:00

0 плюса

12532 Репутация автора

Вместо добавления класса hover ко всем дочерним элементам в hover, вы можете добавить его один раз к «основному» элементу и использовать 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>

Автор: James Размещён: 11.08.2019 11:53
Вопросы из категории :
32x32