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

本期教程针对于javascript中jquery的事件效果实现，在多个一样div出现时，对单个div实行触发只会触发单个div，而不会出现整体同样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));