有什么更好的方法編寫此Javascript懸停功能？

Question

這可行，但當然有點多余。 項也可以動態添加，因此我需要使其始終增加一。 有什么更好的方法將此寫入一個函數？

更新：剛剛添加了標記。 通常，當用戶將鼠標懸停在任何列表項上時，應在橫幅div上附加一個類名。 例如，banner_0，banner_1等。

<ul id="list">
    <li><a href="#" data="">item1</a></li>
    <li><a href="#" data="">item2</a></li>
    <li><a href="#" data="">item3</a></li>
    <li><a href="#" data="">item4</a></li>
    <li><a href="#" data="">item5</a></li>
    <li><a href="#" data="">item6</a></li>
    <li><a href="#" data="">item7</a></li>
</ul>

<div id="banner" class=""></div>


$('#list a').eq(0).hover(
function() {
    $('#banner').addClass('banner_0');
}, 
function() {
    $('#banner').removeClass();
}
);

$('#list a').eq(1).hover(
function() {
    $('#banner').addClass('banner_1');
}, 
function() {
    $('#banner').removeClass();
}
);

$('#list a').eq(2).hover(
function() {
    $('#banner').addClass('banner_2');
}, 
function() {
    $('#banner').removeClass();
}
);

$('#list a').eq(3).hover(
function() {
    $('#banner').addClass('banner_3');
}, 
function() {
    $('#banner').removeClass();
}
);

Answer 1

嘗試使用.index如下所示，

$('#list a').hover(
function() {
    $('#banner').addClass('banner_' + $(this).index());
}, 
function() {
    $('#banner').removeClass();
}
);