これは機能しますが、もちろん少し冗長です。アイテムは動的に追加することもできるので、常に1ずつインクリメントする必要があります。これを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();
}
);