twitter-bootstrap 使用 Bootstrap 单击按钮时更改按钮文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16175740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the button text, when a button is clicked w/ Bootstrap
提问by alyus
Using latest version of Bootstrap and the built-in accordion feature, is there a way to change the text of the button to something different?
使用最新版本的 Bootstrap 和内置的手风琴功能，有没有办法将按钮的文本更改为不同的内容？
For instance: I have a button which displays the text 'Find Cafe', when clicked the accordion opens up and a list is shown. However, I want the text to change to display close.
例如：我有一个按钮，显示文本“Find Cafe”，单击时，手风琴会打开并显示一个列表。但是，我希望文本更改为关闭显示。
I'm thinking I should use the clickand htmlfunctions, but not sure how to arrange them.
我想我应该使用click和html功能，但不确定如何安排它们。
HTML:
HTML：
<div id="accordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Find Cafe
</a>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
JS:
JS：
$('.collaspe').collapse();
回答by isherwood
You woudn't use Bootstrap for this. You'd simply use jQuery:
您不会为此使用 Bootstrap。您只需使用 jQuery：
$('a.accordion-toggle').click(function() {
if ( $(this).next('.accordion-body').hasClass('in') ) {
$(this).text('Close');
} else {
$(this).text('Find Cafe');
}
});
回答by Kieran
You can accomplish this without JS also
您也可以在没有 JS 的情况下完成此操作
.toggle-accordion:before {
content:'see more'
}
.toggle-accordion[aria-expanded="true"]:before {
content:'close';
}
回答by Salam El-Banna
You can do this using jquery
您可以使用 jquery 执行此操作
$('#your-button-id').click(function(){
$(this).text(function(i,old){
return old=='Find Cafe' ? 'Close' : 'Find Cafe';
});
});
Clean & Simple :)
干净简单:)
回答by Gerardo Lagger
If you need configure individual text in template, separating the presentation from functionality.
如果您需要在模板中配置单个文本，请将演示文稿与功能分开。
$('body').on('click', '[data-toggle="collapse"]', function() {
console.log(this);
var _self = $(this);
var _content = $(_self.attr('data-target'));
var _originalText = _self.attr('data-text');
if ( _content.hasClass('in') ) {
_self.text(_self.attr('data-textexp'));
} else {
_self.text(_self.attr('data-text'));
}
});
