javascript - jquery 切换状态

Question

我正在尝试使用 twiter-bootstrap 将文本交换为按钮中的原始文本。

这是文档：

$().button('reset'); 
// Resets button state - swaps text to original text.

$().button(string)
// Resets button state - swaps text to any data defined text state.

参考：http: //twitter.github.com/bootstrap/javascript.html#buttons

这是我的代码 (1)，这是我在 jsfiddle http://jsfiddle.net/D2RLR/2646/上的演示

正如您所看到的，当我尝试单击按钮时，它会按预期更改文本。然后，当我尝试再次单击时，它不会更改文本。
我应该如何修复我的代码？

---

(1)

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
            buttonElement.button('complete');
            // buttonElement.button('reset');
        }
    );
});

$('body').append(buttonElement);
​

Answer 1

这行得通，但我不确定是否有更好的方法来实现这一点。

http://jsfiddle.net/Shmiddty/D2RLR/2651/

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');
buttonElement.attr('data-default-text', 'hide');
buttonElement.on('click', function(event) {
    $('.alert').toggle(function() {
        buttonElement.button($(this).is(':visible') ? 'default' : 'complete');
    });
});

$('body').append(buttonElement);​

啊，有更好的方法：http: //jsfiddle.net/Shmiddty/D2RLR/2655/

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');
buttonElement.on('click', function(event) {
    $('.alert').toggle(function() {
        buttonElement.button($(this).is(':visible') ? 'reset' : 'complete');
    });
});

$('body').append(buttonElement);​

​</p>

Answer 2

试试下面的js代码：

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
        if ($(this).is(':hidden')) {
            buttonElement.text('show');
        } else {
            buttonElement.text('hide');
        }
    });
});

$('body').append(buttonElement);

Answer 3

根据您上面的代码示例。请记住，切换需要多个功能，它将“切换”通过。

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
            buttonElement.button('complete');
        },
        function() {
           buttonElement.button('reset');
        }
    );
});

$('body').append(buttonElement);
​