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

changing a button text after loading/resetting by bootstrap

本文关键字：按钮 文本 引导程序 加载      更新时间：2024-03-26

我正在尝试使用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);中我看到一个新的递增文本，它也会保留旧文本。

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

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

这与该函数不在全局上下文中有关。你可以在这里找到这个答案的更多细节。

基本上，建议在DocumentReady上进行绑定，而不是使用onclick。

希望这能有所帮助！

相关文章：