通过引导加载/重置后更改按钮文本

debugcn 发表于 Dev

最大限度

我正在尝试使用bootstrap3创建喜欢/不喜欢的按钮。

这是我的按钮

<button type="button" id="testBtn" 
class="btn btn-success glyphicon glyphicon-thumbs-up"
data-loading-text=" ... "  onclick="like()" >
4</button>

这是我的没有AJAX调用的JavaScript函数的简化版本：

    function like(){
    var btn = $('#testBtn');
    btn.button('loading');

    var current = parseInt(btn.text()); 
    current++;

    console.log(current);

    btn.button('reset');
    btn.text(current);
   }

通常这可以正常工作，并且每次单击时按钮文本都会增加。

但是，由于我现在使用的是引导程序，因此在重置按钮后，即使console.log(current);我看到一个新的增量文本，它也保留了旧文本。

我想是因为我正在使用引导程序按钮加载/重置，所以我不得不做其他事情来更改按钮文本。

鲁米路

“ btn.text()”是在获取data-loading-text价值，而不是“ 4”。因此，我更新了答案，从而在FIDDLE中为您上下投票

的HTML

<button type="button" id="testBtn" class="btn btn-success glyphicon glyphicon-thumbs-up" data-loading-text=" ... ">
    4</button>
<button type="button" id="testBtnDown" class="btn btn-success glyphicon glyphicon-thumbs-down" data-loading-text=" ... ">
    4</button>

$('#testBtn').click(function () {
    var cnt=4;
    var btn = $(this);
    btn.button('loading');
    setTimeout(function () {
        cnt++;
        btn.button('reset');
        btn.text('  ' + cnt);
    }, 1000);
 });

$('#testBtnDown').click(function () {
    var cnt=4;
    var btn = $(this);
    btn.button('loading');
    setTimeout(function () {
        if (cnt > 0) {
            cnt--;
        }
        btn.button('reset');
        btn.text('  ' + cnt);
    }, 1000);
 });