[英]What is a better way to write this Javascript hover function?
这可行,但当然有点多余。 项也可以动态添加,因此我需要使其始终增加一。 有什么更好的方法将此写入一个函数?
更新:刚刚添加了标记。 通常,当用户将鼠标悬停在任何列表项上时,应在横幅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();
}
);
尝试使用.index
如下所示,
$('#list a').hover(
function() {
$('#banner').addClass('banner_' + $(this).index());
},
function() {
$('#banner').removeClass();
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.