javascript - 编写这个 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();
}
);