jQuery：如果複選框被點擊動畫div

我在我的代碼中有bug複雜化。我一直在研究幾個小時的解決方案。這是我想要實現的：jQuery：如果複選框被點擊動畫div

我有一個包含6個複選框的頁面。每個複選框周圍都有一個包裝div .control-case。如果選中5個複選框，則剩餘複選框的.control-case將添加一個類.unselected。

現在，如果這個包裝器.control-case .unselected被點擊，那麼我有一個通知跨度，我想用jQuery顏色動畫。

好消息：它在點擊時有點作用。

壞消息：它有時會觸發不帶類的div，它也可能會重複顏色變化（我假設由於隊列備份）。我怎樣才能讓它在點擊時在正確的div上觸發一次？

P.S.我也嘗試了.hasClass方法。沒有成功。

這裏是我的代碼： http://pastebin.com/8XR7iHp2

我感謝您的支持！ :)

來源

2012-08-02 Mikel

我可以向您推薦http://jsfiddle.net/您所有的網頁代碼粘貼需要觀看演示，它的方式隔開JS/CSS /標記，使結果的即時預覽。 – 2012-08-02 18:32:35

您可以使用名爲'hasRun'的布爾變量並將其初始設置爲'false'，並在動畫運行一次後將其值更改爲'true' – laker 2012-08-02 18:38:56

每次運行這段代碼時，

$('#type-controls .control-case.unselected').click(function() {

新的點擊處理程序實際上是添加到您的代碼。因此，導致重複發射。我用另一種方法重寫了你的代碼。看看它是否滿足您的要求。

$(document).ready(function() { 
     $('input:checkbox#foam-control, input:checkbox#reversecurve-control, input:checkbox#ultra-control, input:checkbox#pro-control, input:checkbox#icebreaker-control').attr('checked', true); 
     $("#type-controls input[type=checkbox]").click(function() { 
      var countchecked = $("#type-controls input[type=checkbox]:checked").length; 
      if (countchecked >= 5) { 
       $('#type-controls input[type=checkbox]').not(':checked').attr("disabled", true); 
      } 
      else { 
       $('#type-controls input[type=checkbox]').not(':checked').attr("disabled", false); 
      } 
     }); 

     $("#type-controls label").click(function() { 
      var countchecked = $("#type-controls input[type=checkbox]:checked").length; 
      if (countchecked >= 5 && $(this).parent().hasClass('unselected')) { 
       alert("Do notice"); 
       $('.max-notice').animate({ 
        'backgroundColor': '#c30c08', 
        'color': '#fff' 
       }, 400).delay(3000).animate({ 
        'backgroundColor': '#fff', 
        'color': '#777' 
       }, 300); 
      } 
     }); 
    });

您可以在http://jsfiddle.net/w7djF/1/

來源

2012-08-02 19:52:35

它的確如此，您真棒！ – Mikel 2012-08-02 22:42:26

jQuery：如果複選框被點擊動畫div

回答

相關問題