要用上$.each()方法
时间: 2024-03-19 10:43:56 浏览: 46
好的,可以使用$.each()方法来实现。代码如下:
HTML代码:
```
<ul class="menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
```
JavaScript代码:
```
$(document).ready(function() {
// 给菜单项添加鼠标移入事件
$('.menu li').mouseenter(function() {
// 使用each()方法遍历所有菜单项
$('.menu li').each(function() {
// 移除所有菜单项的选中样式
$(this).removeClass('selected');
});
// 给当前菜单项添加选中样式
$(this).addClass('selected');
});
});
```
解释一下代码的实现过程:
1. 在文档加载完成后,使用`$(document).ready()`方法绑定一个事件处理函数,确保DOM已经完全加载完成后再执行代码。
2. 给所有菜单项的父元素`ul`添加一个类名`menu`,方便在JavaScript中选择。
3. 给所有菜单项`li`添加一个鼠标移入事件处理函数。
4. 在事件处理函数中,使用`$.each()`方法遍历所有菜单项。
5. 使用`.removeClass()`方法移除所有菜单项的选中样式`selected`。
6. 使用`.addClass()`方法给当前菜单项添加选中样式`selected`。
这样,当鼠标指针移入菜单项时,被选中的菜单项样式会发生改变,而且使用$.each()方法遍历菜单项更加灵活。
阅读全文