Bessere Möglichkeit, eine Reptiofunktion zu schreiben?

Question

Ich habe Code, der wie folgt aussieht:

$('.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'); 
}); 

Gibt es eine bessere Art und Weise so etwas wie die oben zu schreiben, obwohl es funktioniert?

Answer 1

Sie können eine Mischung aus allgemeinen Klassen zum Gruppieren von Elementen und data Attributen verwenden, um Metadaten mit dem Element zu speichern. Versuchen Sie folgendes:

$('.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>