Что такое лучший способ написать эту функцию зависания 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(); 
} 
);