什麼是寫這個Javascript懸停功能的更好方法？

Question

這有效，但當然有點多餘。項目也可以動態添加，所以我需要讓它始終增加1。將其寫入一個函數的更好方法是什麼？

更新：剛添加標記。基本上，當用戶懸停任何列表項時，應將類名附加到橫幅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(); 
} 
);