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

Question

我正在尝试使用 bootstrap3 创建类似/不一样的按钮。

这是我的按钮

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

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

    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); 中我看到一个新的递增文本。

我认为因为我正在使用引导按钮加载/重置，所以我必须做其他事情来更改按钮文本。

Answer 1

原因与该函数不在全局上下文中有关。您可以找到有关此答案的更多详细信息here。

基本上，建议是在 Document Ready 上进行绑定，而不是为此使用 onclick。

希望这会有所帮助！

Answer 2

'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>

JS

$('#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);
 });