我正在尝试使用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);
答案 0 :(得分:3)
这有效,但我不确定是否有更好的方法来实现这一目标。
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);
答案 1 :(得分:1)
尝试以下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);
答案 2 :(得分:0)
基于上面的代码示例。请记住,切换需要多种功能才能“切换”。
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);