如何简化又长又冗余的 jquery 代码？

Question

##这里是新手## 我有一个很长的代码，想简化它。我将不胜感激你的帮助。谢谢你！ 并且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');
});

Answer 1

对所有

.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");
})

Answer 2

假设以下代码片段的

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>