同名div如何在使用事件条件时实现单独效果–index($(this))

本期教程针对于javascript中jquery的事件效果实现,在多个一样div出现时,对单个div实行触发只会触发单个div,而不会出现整体同样div的触动。

那么教程开始,先看下代码样张与效果样张,上图上图:

效果样张:

这个是由4个相同的class=b的div写的

单击效果样张:

释放实现代码:

$(function(){ 
//鼠标悬停事件
$(".b").hover(function(){ 
$(this).addClass("bb").addClass("bc"); 
},function(){ 
$(this).removeClass("bb").removeClass("bc"); 
}); 
//鼠标多个点击事件
$(".b").toggle(function(){ 
var index1=$(".b").index($(this)); 
$(".b img:eq("+index1+")").attr("src","images/-.jpg"); 
$(".c:eq("+index1+")").slideDown("slow"); 
$(".a:eq("+index1+")").addClass("bj"); 
} ,function(){ 
var index2=$(".b").index($(this)); 
$(".b img:eq("+index2+")").attr("src","images/+.jpg"); 
$(".c:eq("+index2+")").slideUp("slow"); 
$(".a:eq("+index2+")").removeClass("bj"); 
}); 
});

这里说一下,在jquery里面可以使用click点击事件,但在这里我们用toggle,方便些。这里我们是点击.b后触发事件,我们在点击同名div后的触发事件是单一的,不会让其它的class=b的div跟着触发。下面我们对以上toggle事件代码进行解析。

//获取点击的这个.b为第几个.b,并赋值给index1
注:获取的值是从0开始,eq:()方法的也是一样的,都是从零开始。
var index1=$(".b").index($(this));
//将index1带入eq:()方法
$(".b img:eq("+index1+")").attr("src","images/-.jpg"); 
$(".c:eq("+index1+")").slideDown("slow"); 
$(".a:eq("+index1+")").addClass("bj");
//比如我点击的是第一个.b,那么这里解析出来就是
$(".b img:eq(0)").attr("src","images/-.jpg"); 
$(".c:eq(0)").slideDown("slow"); 
$(".a:eq(0)").addClass("bj");
//同理,如果我点击的是第二个.b,那么这里解析出来就是
$(".b img:eq(1)").attr("src","images/-.jpg");
$(".c:eq(1)").slideDown("slow");
$(".a:eq(1)").addClass("bj");

这样就不会导致多个.b跟着一起执行事件

教程结束!

本章关键代码:

var index1=$(".b").index($(this));

发表评论

邮箱地址不会被公开。 必填项已用*标注