綁定來引導單選按鈕狀態改變

Question

我在也使用jQuery的一個頁面下面的引導HTML：

<div class="btn-group" data-toggle="buttons-radio"> 
    <button id="copyButton" class="btn btn-small btn-primary">Copy</button> 
    <button id="editButton" class="btn btn-small btn-primary">Modify</button> 
    <button class="btn btn-small btn-primary active">Do nothing</button> 
</div> 

這三個按鈕出現在一個表的每一行（每一行的用戶必須選擇一個行動）。

我想要顯示和更新Copy按鈕處於活動狀態的行數以及Modify按鈕處於活動狀態的行數的計數器。

我曾嘗試加入以下功能是通過綁定到click事件的按鈕一鍵式特定函數調用：

function updateCounts() { 
    var modifyValueCount = $("button[id=editButton].active").length; 
    var copyValueCount = $("button[id=copyButton].active").length; 
    $("#variablesToModifyCount").text(modifyValueCount); 
    $("#variablesToCopyCount").text(copyValueCount); 
} 

但在我看來，剛剛被點擊按鈕不包括在計數中，因爲active類不會應用到調用onClick結束之後。我也嘗試綁定到mouseup事件，但它似乎也太快了。

Answer 1

點擊時，您可以嘗試檢查它是否已處於活動狀態。因此，它並沒有真正解決問題，被通知有主動引導的，但對於你的榜樣一種變通方法，

$(document).ready(function() { 
    $('button').on('click', function() { 
     if ($(this).is("#editButton")) { 
      if (!$(this).is("#editButton.active")) { 
       updateCounts(1, 0); 
      } else { 
       updateCounts(-1, 0); 
      } 
     } else if ($(this).is("#copyButton")) { 
      if (!$(this).is("#copyButton.active")) { 
       updateCounts(0, 1); 
      } else { 
       updateCounts(0, -1); 
      } 
     } 
    }); 


}); 

function updateCounts(changeEdit, changeCopy) { 
    var modifyValueCount = parseFloat($("#variablesToModifyCount").text()) + changeEdit; 
    var copyValueCount = parseFloat($("#variablesToCopyCount").text()) + changeCopy; 
    $("#variablesToModifyCount").text(modifyValueCount < 0 ? 0 : modifyValueCount); 
    $("#variablesToCopyCount").text(copyValueCount < 0 ? 0 : copyValueCount); 
} 

http://jsfiddle.net/HWfVN/

編輯 這是基於bootstrap2.3.2和切換行爲不是複選框如上， （非常粗糙的實現只是提供一個例子檢查點擊活動是否不存在點擊以便採取相應的行動）

$(document).ready(function() { 
    $("#variablesToModifyCount").text($("button[id=editButton].active").length); 
    $("#variablesToCopyCount").text($("button[id=copyButton].active").length); 

    $('button').on('click', function() { 
     updateCounts($(this).is("#editButton") && !$(this).is("#editButton.active"), 
     $(this).is("#copyButton") && !$(this).is("#copyButton.active"), 
        !$(this).is('#editButton')&&!$(this).is('#copyButton')); 
    }); 


}); 

function updateCounts(incrementEdit, incrementCopy, decrementAll) { 
    var modifyValueCount = $("button[id=editButton].active").length; 
    var copyValueCount = $("button[id=copyButton].active").length; 
    if(incrementEdit){ 
     modifyValueCount++; 
     copyValueCount--; 
    } 
    if(incrementCopy){ 
     copyValueCount++; 
     modifyValueCount--; 
    } 
    if(decrementAll){ 
     copyValueCount--; 
     modifyValueCount--; 
    } 

    $("#variablesToModifyCount").text(modifyValueCount < 0 ? 0 : modifyValueCount); 
    $("#variablesToCopyCount").text(copyValueCount < 0 ? 0 : copyValueCount); 
} 

http://jsfiddle.net/HWfVN/3/