顯示和隱藏處理程序在每次點擊

這是我的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

顯示和隱藏處理程序在每次點擊

回答

相關問題