Блог

##новичок здесь ## У меня длинный код, и я хотел бы его упростить. Я был бы признателен за вашу помощь. Спасибо! И значение fm и mo увеличивается. Он не заканчивается на fm5, а увеличивается в соответствии с предоставленным списком.

вот мой код ->

 $('.fm1').hover(function() {
    $( this ).siblings('.featured-wrap').find('.mo1').toggleClass('active');
});
$('.fm2').hover(function() {
    $( this ).siblings('.featured-wrap').find('.mo2').toggleClass('active');
});
$('.fm3').hover(function() {
    $( this ).siblings('.featured-wrap').find('.mo3').toggleClass('active');
});
$('.fm4').hover(function() {
    $( this ).siblings('.featured-wrap').find('.mo4').toggleClass('active');
});
$('.fm5').hover(function() {
    $( this ).siblings('.featured-wrap').find('.mo5').toggleClass('active');
});
  

Используйте один и тот же класс для всех .fmX , и поместите увеличивающееся число в атрибут данных.

 <div class="fm" data-index="1"></div>
<div class="fm" data-index="2"></div>
<div class="fm" data-index="3"></div>
  

Затем вы можете привязать один обработчик, который использует это значение данных для выбора соответствующего класса для переключения.

 $(".fm").hover(function() {
    var index = $(this).data("index");
    $(this).siblings(".featured-wrap".find(".mo" index).toggleClass("active");
})
  

Предполагая HTML приведенный ниже фрагмент, вы могли бы сделать что-то вроде следующего:

 $('div[class^=fm]').on('mouseover mouseout', (e) => {
  let index = Object.values($(e.target)[0].classList).filter(x => /^fm/.test(x))[0].replace('fm', '');
  $('.mo'   index).toggleClass('active');
});  

 .active {
  color: red;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fm3 otherclass">
  fm3
</div>
<div class="featured-wrap">
  <div class="someclass">
    <div class="mo3 anotherclass">
      3
    </div>
  </div>
</div>
<div class="fm4 otherclass">
  fm4
</div>
<div class="featured-wrap">
  <div class="someclass">
    <div class="mo4 anotherclass">
      4
    </div>
  </div>
</div>
<div class="fm1 otherclass">
  fm1
</div>
<div class="featured-wrap">
  <div class="someclass">
    <div class="mo1 anotherclass">
      1
    </div>
  </div>
</div>
<div class="fm2 otherclass">
  fm2
</div>
<div class="featured-wrap">
  <div class="someclass">
    <div class="mo2 anotherclass">
      2
    </div>
  </div>
</div>