通过 bootstrap 在 loading/resetting 之后更改按钮文本

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);
   }

通常这很有效，每次点击按钮文本都会增加。

但是现在我正在使用 bootstrap，在重置按钮后它会保留旧文本，即使在 console.log(current); 中我看到一个新的递增文本。

我想因为我正在使用 bootstrap 按钮 loading/resetting 我必须做一些其他事情来更改按钮文本。

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);
 });

通过 bootstrap 在 loading/resetting 之后更改按钮文本

changing a button text after loading/resetting by bootstrap

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3