显示和隐藏处理程序在每次点击

这是我的HTML代码多次应用：显示和隐藏处理程序在每次点击

<span id="username_{{ member.id }}" onclick="showMembershipData('{{ member.id }}');">{{ member.user.username }}</span>

，这是我的jQuery代码

function showMembershipData(id) 
    { 
     $("#memberInfo_"+id).slideDown(); 
     $("#username_"+id).click(function(){ 
      hideMembershipData(id); 
     }); 
    } 

    function hideMembershipData(id) { 
     $("#memberInfo_" + id).slideUp(); 
     $("#username_" + id).click(function() { 
      showMembershipData(id); 
     }); 
    }

我想要的用户名可以点击，当点击打开“更多信息”窗格，或者打开它时关闭它。现在发生的情况是：

用户名单击1次：窗格打开。
点击第二次：窗格关闭。到这里为止是好的...
点击第3次的窗格中打开，并连续关闭2倍（即4个操作：打开，关闭，开启，关闭）

等等......为什么呢？我究竟做错了什么？

来源

2011-03-11 xpanta

嗯......现在，我看到我的代码似乎对我来说，。点击（）函数没有覆盖的onclick =“...” HTML属性，使他们都莫名其妙地被激活。如果是这种情况，那么我该如何解决这个问题？ – xpanta 2011-03-11 14:08:58

使用'$ .unbind（）'去除非现实的处理程序，因为Nikhil建议 – vittore 2011-03-11 14:27:21

让我们改变代码一点点，我们应

<span 
    id="username_{{ member.id }}" 
    class="member" 
    data-memberid="{{ member.id }}">{{ member.user.username }}</span>

了jQuery侧

$(".member").toggle(
    function() { // click - show 
     var id = $(this).attr("data-memberid"); 
     $("#memberInfo_" + id).stop().slideDown(); 
    }, 
    function() { // click again - hide 
     var id = $(this).attr("data-memberid"); 
     $("#memberInfo_" + id).stop().slideUp(); 

    });

容易:)

来源

2011-03-11 14:10:38 balexandre

您正在每个处理程序中分配处理程序，并且您只需要分配处理程序一次，或者考虑使用事件委托$.on(event, selector, handler)如果您要添加和删除项目。

考虑代码的下方，并且从标记移除处理程序：

加载类username与ID username_xxx
加载类memberInfo到id元件memeberInfo_xxx
附加data-id属性的元素与具有ID的元素username_xxx

所以标记会是什么样子：

<span class="username" data-id"{{ member.id }}">{{ member.user.username }}</span>

和脚本：这里

$('body').on('click', '.username', function(e) { 
    var id = $(this).data('id') 
    $('#memberInfo_'+id).toggle() 
})

来源

2011-03-11 14:07:40 vittore

谢谢，我该如何从html中删除处理程序？ – xpanta 2011-03-12 07:54:44

问题是，你添加一个事件处理程序，每次showMembershipData被调用。你应该确保只有一个事件处理程序被分配。

来源

2011-03-11 14:09:18 Thariama

您的代码存在问题，即使处理程序已连接多次。基本上用jQuery，如果你做类似的事情

$("#element").click(functionName); 
$("#element").click(functionName); 
$("#element").click(functionName);

然后点击元素一次将触发functionName三次！您需要稍微重构代码以确保事件处理程序的添加和删除操作适当。试试这个

function showMembershipData(id) 
    { 
     $("#memberInfo_"+id).slideDown(); 
     $("#username_"+id).unbind("click").bind("click",(function(){ 
      hideMembershipData(id); 
     }); 
    } 

    function hideMembershipData(id) { 
     $("#memberInfo_" + id).slideUp(); 
     $("#username_" + id).unbind("click").bind("click",(function() { 
      showMembershipData(id); 
     }); 
    }

来源

2011-03-11 14:10:21 Nikhil

你可以让人生一大堆通过使用jQuery的slideToggle()方法更简单 - 请尝试以下操作：

 
function showMembershipData(id) 
{ 
    $("#memberInfo_"+id).slideToggle(); 
}

这将切换#memberInfo + id点击链接时（无论ID为）。我可以建议使用jQuery的click()函数吗？（需要添加到用户名span类）：

 
$("#username_span").click(function() 
{ 
    $("#memberInfo_"+id).slideToggle(); 
});

不要忘了将它添加到您的$(document).ready()位或什么的。完成之后，您可以从跨度中删除onClick。

詹姆斯

来源

2011-03-11 14:10:31 Bojangles

与上面的人同意。 ..你继续注册事件。如果你正在做的是打开和关闭一个：连续

$('#clickme').click(function() { 
    $('#book').slideToggle('slow', function() { 
     // Animation complete. 
    }); 
});

http://api.jquery.com/slideToggle/

来源

2011-03-11 14:11:00 JoeCianflone

slideToggle FTW - 它让事情变得更容易！欢迎来到SO :-) – Bojangles 2011-03-11 14:14:35

谢谢...一直潜伏了一段时间....想通了，现在是时候跳进去玩了:) – JoeCianflone 2011-03-11 14:17:39

嗯，谢谢Tux，你还没有决定加入“专家”交流！ ;-) – Bojangles 2011-03-11 14:19:00

这是happenign 2次，因为每次调用这些函数时它们所连接的点击功能，火灾。

尝试

$("#username_"+id).click(function(){ 
    var $showHideElement =$("#memberInfo_"+id); 
    if ($showHideElementis(':visible'){ 
    $showHideElement.slideUp(); 
    }else{ 
    $showHideElement.slideDown(); 
    } 
})

来源

2011-03-11 14:11:06

显示和隐藏处理程序在每次点击

回答

相关问题