2

我在也使用 jQuery 的页面中有以下 Bootstrap 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事件，但似乎也为时过早。

4

1 回答 1

2

您可以尝试在单击时检查它是否已经处于活动状态。因此，它并不能真正解决有关引导程序活动通知的问题，但对于您的示例来说是一种解决方法，

$(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/

于 2013-10-11T13:14:47.740 回答