twitter-bootstrap 单击按钮时切换 Bootstrap 按钮文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28500650/
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
Toggle Bootstrap button text on button click?
提问by George Hawkins
I want to toggle the text on a button each time it's clicked, e.g. from "Show more..." to "Show less...".
我想在每次点击按钮时切换文本，例如从“显示更多...”到“显示更少...”。
I have a button that's used to expand or collapse a nearby block (see the Collapsesection of the Bootstrap docs, click the example "Link with href" button there to see what I mean).
我有一个按钮用于展开或折叠附近的块（请参阅Bootstrap 文档的折叠部分，单击此处的示例“Link with href”按钮以了解我的意思）。
The HTML for such a Bootstrap button looks like this:
此类 Bootstrap 按钮的 HTML 如下所示：
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
See more...
</a>
When the related block is collapsed I want the button text to be e.g. "Show more..." and when it's expanded I want it to be e.g. "Show less...".
当相关块折叠时，我希望按钮文本为例如“显示更多...”，当它展开时我希望它为例如“显示更少...”。
I've seen solutions that separate the button text off into jQuery, Javascript or CSS - but that makes it difficult to read the HTML(the button text is somewhere else entirely to the button) and also makes it more difficult to localize.
我已经看到将按钮文本分离为 jQuery、Javascript 或 CSS 的解决方案 - 但这使得阅读 HTML 变得困难（按钮文本完全位于按钮的其他位置）并且也使得本地化变得更加困难。
回答by George Hawkins
Using jQuery the answer is simple. Just mark such buttons with a new class called toggle-textand use <span>and <span class="hidden">to mark the text you want to toggle back and forward between:
使用 jQuery，答案很简单。只需toggle-text使用名为和使用的新类标记此类按钮，<span>并<span class="hidden">标记要在以下之间来回切换的文本：
<a class="btn btn-primary toggle-text" data-toggle="collapse" href="#collapseExample">
See <span>more</span><span class="hidden">less</span>...
</a>
You can have as many or few <span>tags as you want and can order them as you want, all that's important is whether or not they're marked with class hidden.
您可以根据需要拥有任意多或少的<span>标签，并可以根据需要对它们进行排序，重要的是它们是否标有 class hidden。
Now in jQuery you can do:
现在在 jQuery 中，您可以执行以下操作：
$('.hidden').removeClass('hidden').hide();
$('.toggle-text').click(function() {
$(this).find('span').each(function() { $(this).toggle(); });
});
The first line is a bit of boiler plate - jQuery and Bootstrap have somewhat conflicting ideas about hidden. This just flips everything you've marked as hidden using the Bootstrap class hiddento being hidden by jQuery which makes it easier to use the
jQuery visibility functions afterwards.
第一行有点像样板文件 - jQuery 和 Bootstrap 关于隐藏的想法有些矛盾。这只是将您使用 Bootstrap 类标记为隐藏的所有内容翻转hidden为由 jQuery 隐藏，这使得之后使用 jQuery 可见性函数更容易。
The next bit is the important stuff - it installs a handler on all elements marked with our new class toggle-text- this handler toggles the visibility of the <span>children of the given element when it's clicked.
下一点是重要的东西——它在所有用我们的新类标记的元素上安装一个处理程序toggle-text——这个处理程序在<span>单击时切换给定元素的子元素的可见性。
See everything in action with this jFiddle - http://jsfiddle.net/w3y421m9/1/
使用此 jFiddle 查看所有操作 - http://jsfiddle.net/w3y421m9/1/
Note: the name toggle-textis completely arbitrary and is just used for marking buttons for which we want this toggle behavior.
注意：名称toggle-text是完全任意的，仅用于标记我们想要这种切换行为的按钮。
This is the first time I've written a question with the intention of answering it. I'm interested to see if someone has a better answer.
这是我第一次写一个问题，打算回答它。我很想知道是否有人有更好的答案。
To me this solution looks super simple and has the big plus of keeping the button text together with the HTML for the button, without additional button specific CSS or Javascript/jQuery code.
对我来说，这个解决方案看起来非常简单，并且具有将按钮文本与按钮的 HTML 保持在一起的巨大优势，无需额外的按钮特定 CSS 或 Javascript/jQuery 代码。
The jQuery is nice in that it doesn't have to be customized on a per-button basis depending on the text you want to display. And you've got a lot of flexibility with mixing text that you do and don't want to toggle, e.g. the following are all equivalent:
jQuery 很好，因为它不必根据要显示的文本在每个按钮的基础上进行自定义。并且您可以灵活地混合您想要切换和不想切换的文本，例如以下都是等效的：
<span>Show more...</span><span class=hidden">Show less...</span>
Show <span>more</span><span class=hidden">less</span>...
Show <span class=hidden">less</span><span>more</span>...
回答by David Hempy
I tried a couple of these approaches before cobbling this one together. It is the simplest, most readable approach I've seen so far:
在拼凑这个方法之前，我尝试了其中的几种方法。这是迄今为止我见过的最简单、最易读的方法：
<a href="#" data-toggle='collapse'
data-target="#filters,#view_filters,#hide_filters">
<span id='view_filters' class='collapse in'>View Filters</span>
<span id='hide_filters' class='collapse out'>Hide Filters</span>
</a>
<div id="filters" class="collapse out">
Now you see me!
</div>
The main purpose of this link is to toggle visibility of div#filters...but it takes advantage of multiple selectors in data_target to also toggle the visibility of the two versions of the link text. Just make sure you've got one text as ".collapse .in" and the other as ".collapse .out".
此链接的主要目的是切换 div#filters 的可见性...但它利用 data_target 中的多个选择器来切换两个版本的链接文本的可见性。只要确保你有一个文本为“.collapse .in”，另一个文本为“.collapse .out”。
Beyond its simplicity, I like that this is very reliable. Because the tag is never hidden or manipulated, you'll never accidentally lose the view/hide link while debugging.
除了它的简单性之外，我喜欢它非常可靠。因为标签永远不会被隐藏或操纵，所以在调试时你永远不会意外丢失查看/隐藏链接。
回答by Mike Reid
Rather than dealing with excess tags or placing your alternate button text withinyour JavaScript directly, I personally prefer leveraging HTML5 custom data attributes. This way you can easily rotate between the originaland alternatebutton text on each click, but keep it relative to your toggle element.
我个人更喜欢利用 HTML5自定义数据属性，而不是处理多余的标签或直接将备用按钮文本放在JavaScript 中。通过这种方式，您可以轻松地在每次单击时在原始按钮文本和替代按钮文本之间旋转，但保持它相对于您的切换元素。
jQuery(function($){
$('.btn[data-toggle="collapse"]').on('click', function(){
$(this)
.data('text-original', $(this).text())
.text($(this).data('text-alt') )
.data('text-alt', $(this).data('text-original'));
});
});<!--styles-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--toggle 1-->
<button class="btn btn-link" data-toggle="collapse" data-target=".details-1" data-text-alt="- hide details">+ show details</button>
<div class="details-1 collapse">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<hr>
<!--toggle 2-->
<button class="btn btn-link" data-toggle="collapse" data-target=".details-2" data-text-alt="- hide details">+ show details</button>
<div class="details-2 collapse">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<!--scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>回答by Yameen
You can use simple jQuery to achive this.
您可以使用简单的 jQuery 来实现这一点。
https://jsfiddle.net/YameenYasin/5j0ehez1/40/
https://jsfiddle.net/YameenYasin/5j0ehez1/40/
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
See more...
</a>
$('a').click(function(){
if($(this).text().trim() == 'See more...' ){
$(this).text('See Less...');
}else{
$(this).text('See more...');
}
});
回答by Mark van Dijk
Thanks for your suggestions. You pointed me in the right direction but I ended up doing it slightly different. My solution uses a bit of CSS to tell what the "hidden" class means and then jQuery toggles this class on all SPAN elements:
感谢您的建议。你给我指明了正确的方向，但我最终做的略有不同。我的解决方案使用一些 CSS 来说明“隐藏”类的含义，然后 jQuery 在所有 SPAN 元素上切换此类：
HTML(similar to yours):
HTML（类似于你的）：
<a class="toggle-link" href="...">
<span>Show more...</span>
<span class="hidden">Show less...</span>
</a>
CSS:
CSS:
.toggle-link .hidden {
display: none;
}
Update: You don't need this bit of css if you're using bootstrap, as pointed out by George Hawkins
更新：正如 George Hawkins 所指出的，如果您使用的是引导程序，则不需要这些 css
jQuery:
jQuery：
jQuery(".toggle-link").click(function() {
jQuery(this).find("span").toggleClass("hidden");
/* Add more logic here */
});
I'm not saying it's better per se but to me it looks a bit cleaner. Also, you could expand on this method by not hiding a text but changing it's color back and forth, etcetera.
我并不是说它本身更好，但对我来说它看起来更干净一些。此外，您可以通过不隐藏文本而是前后更改其颜色等来扩展此方法。
