更好的方式來寫一個reptitive功能？

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>