Question

我正在尝试使用bootstrap3创建like / different按钮。

这是我的按钮

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

我认为因为我正在使用自举按钮加载/重置我必须做一些其他事情来更改按钮文本。

Answer 1

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

Answer 2

其原因与该功能不在全球范围内有关。您可以在here找到更多有关此答案的详细信息。

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

希望这有帮助！

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

2 个答案: