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），這裏是我的jsfidlle 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);​ 

Answer 2

。切記切換需要多個功能，才能「切換」。

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

Answer 3

試試下面的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);