Лучший способ написать функцию рептилия?

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>