jquery 1.81的toggle是不是有个计数器?

Question

如何针对特定的元素计数,而不是对选择器选中的元素集合累计数.看代码吧:<cite class="manage_tpl">
<a href="javascript:;" rel="edit">编辑</a>
<a href="javascript:;" rel="filter">删除</a>
<a href="javascript:;" rel="digg">推荐</a>
<a href="javascript:;" rel="share">分享</a>
</cite>
<div class="tpl_board hid"></div>
$('.manage_tpl a').toggle(function(){
$('.tpl_board').removeClass('hid');
},
function(){
$('.tpl_board').addClass('hid');
});
我这样操作发现的问题:
如果点<分享>,第一次显示tpl_board,第二次隐藏,第三次显示,第四次隐藏.看上去不错.刷新后:
如果点第一次点<分享>tpl_board显示,第二次点<推荐>tpl_board显示,第三次点<推荐>tpl_board隐藏,第四次点<分享>.没反应

Answer 1

精通的jquery的同学帮忙说说.不要拿版本号说事.就说1.81

Answer 2

你上面的用法是相当于绑定了两个事件$('.manage_tpl a').click(function(){
   $('.tpl_board').toggleClass('hid');
}这才是toggleClass的正统用法

Answer 3

不光是切换classname还有的事要作的呀

Answer 4

toggle是针对当前元素执行101010这种操作，而不是所有列出的元素点击一次就切换一次

Answer 5

不是很明白你的意思你上面写的代码就是对每个a标签做单独的toggle，事件状态独有，并不共享我后面写的那个是针对所有的a标签共享了状态了

Answer 6

就结贴了可真速度我说不明白你的意思是指：“不光是切换classname还有的事要作的呀”。不知道你说的还有别的事要做是指什么只是因为那种写法，有时候会让操作的时候有点莫名其妙比如从编辑~分享依次点一次，然后再重头点一次。当第二次点击删除时，后面所有的都会“感觉”像是没有触发事件。或者交叉点击也会有这种“感觉”我原本是想问问你的需求的，什么情况下会需要这样进行处理才最合适。因为我以前也这样用过，但感觉太莫名其妙了，于是肯定我当时的需求肯定是不适合这样使用

Answer 7

哪你后来怎么设计的.我在每个条目下面有一组操作.默认只有连接,点不同的连接会在tpl_board中append操作表单

Answer 8

这是我的代码: $('.manage_tpl a').toggle(function(){
var action=$(this).attr('rel');
var eleID=action+Math.floor(Math.random()*10000+1); $('.tpl_board').removeClass('hid').attr('id',eleID).parents('.tpl_container').addClass('if_focus');
if(action=='filter') $.halobox_filter(eleID);
if(action=='digg') $.halobox_digg(eleID);
if(action=='share') $.halobox_share(shareset,eleID); },
function(){
$('.tpl_board').addClass('hid').parents('.tpl_container').removeClass('if_focus');
});

Answer 9

因为我当时估计跟你差不多需求。最主要的是为了一点。不想对菜单去单独的绑定事件，想批量处理因为是菜单嘛，我肯定是需要当我从其他项切换到当前项时它总是显示的，在当前项再次点击时才隐藏所以，当时是在对象节点上增加了一个属性。以记录上一次的点击对象你这代码要是套我头上有这需求，我应该会写成这样鬼样子，因为我没写hid样式，所以直接用.show().hide()了;.tpl_container 这个元素我也没写，就从你的代码里注释掉了
<script type="text/javascript">
$(function(){
    $('.manage_tpl a').click(function(){
        var board=$('.tpl_board');
        var action=$(this).attr('rel');
        if(board.attr("rel")!=action){
            board.show().attr("rel",action);
            var eleID=action+Math.floor(Math.random()*10000+1);
            board.attr('id',eleID).html($(this).html());//.parents('.tpl_container').addClass('if_focus');
            if(action!='edit'){
                eval("$.halobox_"+action+"(eleID);")
            }
        }else{
            board.hide().removeAttr("rel");//.parents('.tpl_container').removeClass('if_focus');
        };
    })
})$.halobox_filter=function(a){
    alert(a)
}
$.halobox_digg=function(a){
    alert(a)
}
$.halobox_share=function(a){
    alert(a)
}
<script>
<cite class="manage_tpl">
    <a href="javascript:;" rel="edit">编辑</a>
    <a href="javascript:;" rel="filter">删除</a>
    <a href="javascript:;" rel="digg">推荐</a>
    <a href="javascript:;" rel="share">分享</a>
</cite>
<div class="tpl_board hid"></div>

Answer 10

咦，没注意
if(action=='share') $.halobox_share(shareset,eleID);
这个是两个参数的。那就不能那样偷懒了,或者将参数统一成数组，然后再那样偷懒

Answer 11

var shareset=['新浪微博','人人网','QQ空间','腾讯微博','腾讯微博','开心网','豆瓣网','搜虎微博','网易微博','天涯','飞信'];

Answer 12

而且，如果你生成的eleID,如果仅仅是拿来定位：<div class="tpl_board hid"></div>的话，那也不需要了吧？？

Answer 13

生成的id对后续的功能函数有用/,像这些:$.halobox_share

Answer 14

最终的代码,虽然不美观,但功能都实现了 $('.manage_tpl a').each(function(){
$(this).click(function(){
if($('.tpl_board').hasClass('hid')){
$('.tpl_board').removeClass('hid');
} else {
if($(this).attr('rel')==$('.tpl_board').attr('id').replace(/\d+/g,'')){
$('.tpl_board').addClass('hid');
}
}

var action=$(this).attr('rel');
var eleID=action+Math.floor(Math.random()*10000+1);
$('.tpl_board').attr('id',eleID);

if(action=='filter') $.halobox_filter(eleID);
if(action=='digg') $.halobox_digg(eleID);
if(action=='share') $.halobox_share(shareset,eleID);
});
});

Answer 15

呃，你这样写的话。在隐藏时，下面的功能函数还照样会执行呀。没必要吧？
你把它移到
if($('.tpl_board').hasClass('hid')){
里面岂非更好？

Answer 16

搞错了，按你这逻辑判断，你应该是这样才对？
var a=!0;
if($(this).attr('rel')==$('.tpl_board').attr('id').replace(/\d+/g,'')){
                    $('.tpl_board').addClass('hid');
                    a=!1;
                }
if(a){
var action=$(this).attr('rel');
……
}