关于动态获取数值的问题

$('.left').click(function() {
console.log($('video:hidden').index());
console.log('左侧点击事件触发');
$('#videoIndex' + clickNumLeft).fadeOut(3000);
clickNumLeft++;
$('#videoIndex' + clickNumLeft).fadeIn(3000);
if(clickNumLeft == 4) {
clickNumLeft = 0;
}
});

上面这段代码控制的是4个元素显示隐藏的函数，但console.log($('video:hidden').index());
为什么在函数里面获取当前显示的元素下标自第二个开始就是0了，不应该动态获取下标的吗？请老师赐教。

目訫 2018-12-18

源自：jQuery弹出层案例 3-1 弹出层通用函数封装（上）

收起

3回答

好帮手慕夭夭回答被采纳获得+3积分 2018-12-20 09:56:38

你好同学 ,同学应该还有css没有上传 , 因为.left是个空标签 ,老师给他设置了一些样式 ,然后点击它进行测试 , $('video:hidden').index()的结果是1 , 并不是0 , 因为根据你上传的代码中 , 是从第二个video开始隐藏的 ,所以你获取的是第二个隐藏的video元素 , 所以点击left , 获取到的索引是1 . 你的代码中并没有设置动态获取元素下标 .

动态获取下标是给页面几个相同元素绑定一个点击事件, 例如页面中有几个.box元素 , 如下使用this,点击哪个获取哪个元素的索引值

同学想要实现什么要的效果 , 可以重新提问一个新问题 , 把具体的需求详细描述一下 ,这样老师具体的帮助你解决 .

希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .

收起回答

提问者目訫 2018-12-20 01:07:40

HTML:

<div id="body">
<video id="videoIndex1" src="../log_video/welcome.mp4" autoplay loop muted></video>
<video id="videoIndex2" src="../log_video/welcome (2).mp4" autoplay loop muted style="display: none;"></video>
<video id="videoIndex3" src="../log_video/welcome (3).mp4" autoplay loop muted style="display: none;"></video>
<video id="videoIndex4" src="../log_video/welcome (4).mp4" autoplay loop muted style="display: none;"></video>
<div class="direction left"></div>
</div>

jQuery:

$(function() {
    $('.left').click(function() {
    console.log($('video:hidden').index());
    console.log('左侧点击事件触发');
    $('#videoIndex' + clickNumLeft).fadeOut(3000);
    clickNumLeft++;
    $('#videoIndex' + clickNumLeft).fadeIn(3000);
    if(clickNumLeft == 4) {
    clickNumLeft = 0;
    }
    });
  });

收起回答

好帮手慕夭夭 2018-12-19 11:03:52

你好同学 ,请把完整代码粘贴上来 ,便于老师针对代码准确的为你解决问题 , 祝学习愉快 !

收起回答

提问者目訫 #1

HTML: <div id="body"> <video id="videoIndex1" src="../log_video/welcome.mp4" autoplay loop muted></video> <video id="videoIndex2" src="../log_video/welcome (2).mp4" autoplay loop muted style="display: none;"></video> <video id="videoIndex3" src="../log_video/welcome (3).mp4" autoplay loop muted style="display: none;"></video> <video id="videoIndex4" src="../log_video/welcome (4).mp4" autoplay loop muted style="display: none;"></video> </div> jQuery: $('.left').click(function() { console.log($('video:hidden').index()); console.log('左侧点击事件触发'); $('#videoIndex' + clickNumLeft).fadeOut(3000); clickNumLeft++; $('#videoIndex' + clickNumLeft).fadeIn(3000); if(clickNumLeft == 4) { clickNumLeft = 0; } });

2018-12-20 01:03:27