for(var i=0;i<slideLength;i++){
$(".slide").eq(i).index=i;
$(".slide").eq(i).on("click",function(){
console.log($(this).index);
});
}
我想问一下,我用$(".slide").eq(i)
这句话来取第i个节点,还有其他方法吗,最重要的是console.log($(this).index);
这个是不存在的,我想问一下为什么呢??
我们从实际的应用来表达一下你的意思吧
举个例子,有这样一堆li
<ul class="list">
<li>Bootstrap</li>
<li>jQuery</li>
<li>gulp</li>
<li>angular</li>
</ul>
我希望点击每个li,都能够在控制台中输出li的内容,于是可以这样写
$(function() {
$('.list').on('click', function(e) {
console.log($(e.target).html());
})
});
你运行试试看,效果已经达到了。
这里运用了事件委托的思想,在点击时,使用 $(e.target)来判断被点击的对象
其中 e.target是DOM对象,表示的是被点击的li,
$(e.target)当然就是被点击那个li的jQuery对象了
也许在其他的一些应用场景中,你需要得到被点击li的序列,比如幻灯片切换效果的那一堆小按钮,除了在li中直接设置1,2,3,4之外,现在还流行一种做法,就是设置诸如data-item之类的属性值
整个例子的完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-2.0.3.js"></script>
</head>
<body>
<ul class="list">
<li>Bootstrap</li>
<li>jQuery</li>
<li>gulp</li>
<li>angular</li>
</ul>
</body>
<script>
$(function() {
$('.list li').each(function(i) {
$(this).attr('data-item', i);
})
$('.list').on('click', function(e) {
var $curLi = $(e.target);
console.log($curLi.html()); //输出当前li的值
console.log($curLi.attr('data-item')); //输出当前li的序列
})
});
</script>
</html>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。