老师有多个floor 怎么分别监听 tab-item的鼠标事件

var floor=$('.floor-box')

floor.$floor=floor.find('.floor')

floor.$floor.on('mouseenter','.tab-item',function(){

// index=$(this).index()

console.log('eeee'+$(this).index())

})

要怎么写我这样写不对吗

源自：实战：楼层模块组件化 5-6 项目作业

收起

3回答

好帮手慕久久回答被采纳获得+3积分 2020-09-12 15:26:46

同学你好，同学只是问了怎么监听事件，没有提索引的问题，所以老师只告诉同学，这样写是可以监听事件的，因为有打印的内容。而索引始终获取为0，的确与层级有关系，由于tab-item是处于li中，而li中只有一个tab-item，所以获取的都是0。可以这样实现一下：

祝学习愉快！

好帮手慕久久 2020-09-12 09:28:35

同学你好，与包裹的li是没有关系的，比如下面的例子：

建议同学仔细检查自己的html结构上是否有“.floor-box”这个元素，视频中，老师书写的结构是没有该元素的。另外，同学可以打印一下变量floor（var floor=$('.floor-box')），看是否获取到内容，再看看获取的floor.$floor是否正确。

祝学习愉快！

提问者森先三 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="floor-box"> <ul class="floor"> <li><button class="tab-item">111111</button></li> <li><button class="tab-item">111222</button></li> <li><button class="tab-item">333333</button></li> </ul> <ul class="floor"> <li><button class="tab-item">111111</button></li> <li><button class="tab-item">111222</button></li> <li><button class="tab-item">333333</button></li> </ul> </div> </body> <script src="./js/jquery.js"></script>  <script> var floor=$('.floor-box') floor.$floor=floor.find('.floor') floor.$floor.on('mouseenter','.tab-item',function(){ console.log('eeee:'+$(this).index()) }) </script> </html> 老师我这里确实不行这是我按你的写的去掉li就可以

2020-09-12 14:48:32
提问者森先三 #2

console.log($(this).index()) 打印的一直是0

2020-09-12 14:51:34

好帮手慕久久 2020-09-11 18:10:52

同学你好，这样写是可以实现给每一个tab-item添加mouseenter事件的，如下：

建议同学检查一下自己的html结构是否正确。

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

提问者森先三 #1

<li class="fl"><a href="javascript:;" class="tab-item">一个</a></li> tab-item 外面包了一个li好像就获取不到了这是层级问题吗但是我看老师视频的项目里面这样写也是可以的

2020-09-12 01:27:03