日期:2014-05-16  浏览次数:20333 次

怎么调用相同的class 实现多个一样效果
$(document).ready(function(){
    $(".box_input").click(function(){
            $(".ts_z2").toggle();    
})
});

请问下 如果我想要多个这样的效果 调用相同的class 应该怎么写 是要一个一个实现的 不要同时实现的

------解决方案--------------------
楼主是这个意思么?

有一堆.box_input,和一堆要toggle的.ts_z2, 他们一一对应,点击某个box_input,将对应的.ts_z2给toggle了,而其他的.ts_z2不受影响,是么?

这里就是要找到这种对应关系,说说我的做法:

1.根据dom结构

$(document).ready(function(){
    $(".box_input").click(function(){
         $(this).parent().find(".ts_z2").toggle();    
         //虽然有很多.ts_z2,但是根据dom结构,点击.box_input的时候
         //只需toggle相同parent下的.ts_z2,
         //由于dom结构的不同,你可能还需要next() prev()这些jq方法
    });
});


2.根据自定义属性建立对应关系,
在.box_input中加入一个data-target属性,指向需要被toggle的元素的class或id或序号

$(document).ready(function(){
    $(".box_input").click(function(){
         var target = $(this).data("target");    
         $("#"+target).toggle();//直接保存id
         //$("#container").find(".ts_"+target).toggle();
         //还有很多种做法,利用自定义属性来建立.box_input和需要toggle的元素的对应关系
    });
});


个人觉得,根据dom结构来建立对应关系是最省力的。加入额外的属性和有规律的id、class固然也可以。

说了这么多,还不知道LZ问的问题是不是我想的这样,汗啊~