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

对所有surround使用相同的类，并将递增数字放入数据属性中。

.fmX

然后，您可以绑定一个处理程序，该处理程序使用该数据值来选择要切换的相关类。

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

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>

如何简化冗长且冗长的jquery代码？

2 个答案: