Javascript 显示和隐藏处理程序在每次单击时应用多次_Javascript_Jquery

Javascript 显示和隐藏处理程序在每次单击时应用多次

javascript jquery

Javascript 显示和隐藏处理程序在每次单击时应用多次,javascript,jquery,Javascript,Jquery,这是我的html代码： <span id="username_{{ member.id }}" onclick="showMembershipData('{{ member.id }}');">{{ member.user.username }}</span> 我希望用户名是可点击的，点击时打开“更多信息”窗格，或关闭它，如果它是打开的。现在发生的是：用户名单击1次：窗格打开第二次单击：窗格关闭。到这里很好单击第三次窗格可连续打开和关闭2次（即4个操作：打开、关

这是我的html代码：

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

我希望用户名是可点击的，点击时打开“更多信息”窗格，或关闭它，如果它是打开的。现在发生的是：

用户名单击1次：窗格打开
第二次单击：窗格关闭。到这里很好
单击第三次窗格可连续打开和关闭2次（即4个操作：打开、关闭、打开、关闭）

等等。。。为什么？我在做什么错误？

你在每个处理程序中分配处理程序，只需要分配一次处理程序，或者甚至考虑使用事件委托<代码> $on（事件、选择器、处理程序）< /C> >如果你正在添加和移除项。< /P> 考虑下面的代码，并从标记中删除处理程序：

将class
```
username
```
添加到id为
```
username\u xxx
```
将class
```
memberInfo
```
添加到id为
```
memeberInfo\u xxx
```
将
```
数据id
```
属性添加到id为
```
用户名\u xxx
```

因此，标记将看起来像：

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

您在每个处理程序中分配处理程序，只需要指定一次处理程序，或者甚至考虑使用事件委托<代码> $on（事件、选择器、处理程序）< /C> >如果您正在添加和移除项。

考虑下面的代码，并从标记中删除处理程序：

将class
```
username
```
添加到id为
```
username\u xxx
```
将class
```
memberInfo
```
添加到id为
```
memeberInfo\u xxx
```
将
```
数据id
```
属性添加到id为
```
用户名\u xxx
```

因此，标记将看起来像：

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

这里的问题是每次调用

showMembershipData

时都会添加一个事件处理程序。

您应该确保只分配一个事件处理程序。

这里的问题是，每次调用

showMembershipData

时，都要添加一个事件处理程序。

您应该确保只分配一个事件处理程序。

代码的问题是，即使是处理程序也被附加了多次。如果您执行以下操作，基本上使用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);
        });
    }

代码的问题是，即使是处理程序也会被附加多次。如果您执行以下操作，基本上使用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);
        });
    }

通过使用jQuery的

slideToggle（）

方法，您可以让生活变得更加轻松-尝试以下方法：

function showMembershipData(id) { $("#memberInfo_"+id).slideToggle(); } 别忘了将它添加到您的

$（document）.ready（）

位或其他任何位置。完成后，可以从span中删除

onClick

James

通过使用jQuery的

slideToggle（）

方法，您可以让生活变得更加轻松-尝试以下方法：

function showMembershipData(id) { $("#memberInfo_"+id).slideToggle(); } 别忘了将它添加到您的

$（document）.ready（）

位或其他任何位置。完成后，可以从span中删除

onClick

詹姆斯

让我们稍微修改一下代码，好吗

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

简单：）

让我们稍微修改一下代码，好吗

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

简单：）

同意上面的说法……你一直在注册活动。如果您所做的只是打开和关闭一个：

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

同意上面的说法……你继续注册活动。如果您所做的只是打开和关闭一个：

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

这是连续发生2次的，因为每次调用这些函数时，它们都绑定一个触发的单击函数

试一试

这是连续发生2次的，因为每次调用这些函数时，它们都会绑定一个触发的click函数

试一试

隐马尔可夫模型。。。现在我看到了我的代码，.click（）函数似乎没有覆盖onclick=“…”html属性，因此它们都以某种方式被激活。如果是这种情况，那么我如何解决这个问题？使用

$.unbind（）

删除Nikhil建议的不必要的处理程序。。。现在我看到了我的代码，.click（）函数似乎没有覆盖onclick=“…”html属性，因此它们都以某种方式被激活。如果是这种情况，那么我如何解决这个问题呢？使用

$.unbind（）

删除Nikhil建议的不必要的处理程序SlideToggle FTW-它使事情变得更加简单！欢迎来到SO:-）好吧，谢谢Tux你还没有决定加入“专家”交流英雄联盟我加入专家交流的那一天就是我停止编程的那一天，同样，但是

stru替换（“停止编程”，“死亡”）（是的，我知道它缺少一个参数）滑动切换FTW-它使事情变得更容易！欢迎来到SO:-）好吧，谢谢Tux你还没有决定加入“专家”交流英雄联盟我加入专家交流的那一天就是我停止编程的那一天，同样，但是stru替换（“停止编程”，“死亡”）（是的，我知道它缺少一个参数）