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>

编写reptitive函数的更好方法是什么？

1 个答案: