javascript - 编写重复函数的更好方法？

Question

我有这样的代码:

$('.item-one').mouseover(function() {
    $('.img-one').addClass('fit-img');
});

$('.item-two').mouseenter(function() {
    $('.img-two').addClass('fit-img');
});

$('.item-three').mouseenter(function() {
    $('.img-three').addClass('fit-img');
});

有没有更好的方法来编写类似上面的东西，即使它有效？

Answer 1

您可以混合使用通用类来对元素进行分组，并使用 data 属性来存储元素的元数据。试试这个:

$('.item').mouseover(function() {
  var target = $(this).data('target');
  $(target).addClass('fit-img');
});

.img {
  display: none;
  width: 30px;
  height: 30px;
}
.img.fit-img { display: block; }

.img-one { background-color: red; }
.img-two { background-color: green; }
.img-three { background-color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="item" data-target=".img-one">one</a>
<a href="#" class="item" data-target=".img-two">two</a>
<a href="#" class="item" data-target=".img-three">three</a>

<div class="img img-one"></div>
<div class="img img-two"></div>
<div class="img img-three"></div>