点击按钮切换Bootstrap按钮文本？
我希望每次单击按钮时切换按钮上的文本，例如从“显示更多…”到“显示更少…”。
我有一个用于展开或折叠附近块的按钮（请参阅Bootstrap文档的折叠部分，单击示例“Link with href”按钮，看看我的意思）。
这种Bootstrap按钮的HTML如下所示：
See more... 当相关块被折叠时，我希望按钮文本例如是“显示更多…”，当它被展开时，我希望它是例如“显示更少……”。
我已经看到了将按钮文本分离为jQuery，Javascript或CSS的解决方案 – 但这使得难以阅读HTML （按钮文本完全位于按钮的其他位置），并且使本地化更加困难。
使用jQuery答案很简单。 只需使用名为toggle-text的新类标记此类按钮，并使用和标记要在以下之间切换的文本：
See morelesshttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/...
您可以根据需要添加任意数量的标签，并可以根据需要对其进行排序，重要的是它们是否标记为hidden类。
现在在jQuery中你可以做到：
$('.hidden').removeClass('hidden').hide(); $('.toggle-text').click(function() { $(this).find('span').each(function() { $(this).toggle(); }); });
第一行是一个锅炉板 – jQuery和Bootstrap有一些关于隐藏的相互矛盾的想法。 这只是将您标记为隐藏的所有内容翻转为使用隐藏的jjQuery隐藏的Bootstrap类，这使得之后更容易使用jQuery可见性函数。
接下来的一点是重要的东西 – 它在用我们的新类toggle-text标记的所有元素上安装一个处理程序 – 这个处理程序在单击时切换给定元素的子元素的可见性。
用这个jFiddle查看一切实际操作 – http://jsfiddle.net/w3y421m9/1/
注意：名称toggle-text完全是任意的，仅用于标记我们想要此切换行为的按钮。
这是我第一次写一个问题，意图回答它。 我很想知道某人是否有更好的答案。
对我来说，这个解决方案看起来非常简单，并且将按钮文本与按钮的HTML保持在一起，没有额外的按钮特定CSS或Javascript / jQuery代码。
jQuery很不错，因为它不必按每个按钮进行自定义，具体取决于您要显示的文本。 而且你有很多灵活性来混合你做过但不想切换的文本，例如以下都是等价的：
Show morehttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/...Show lesshttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/... Show morelesshttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/... Show lessmorehttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/...
您可以使用简单的jQuery来实现这一点。
https://jsfiddle.net/YameenYasin/5j0ehez1/40/
See morehttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/... $('a').click(function(){ if($(this).text().trim() == 'See morehttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/...' ){ $(this).text('See Lesshttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/...'); }else{ $(this).text('See morehttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/...'); } });
我个人更喜欢利用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')); }); });
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
谢谢你的建议。 你指出了我正确的方向，但我最终做的略有不同。 我的解决方案使用一些CSS来说明“隐藏”类的含义，然后jQuery在所有SPAN元素上切换此类：
HTML （与您的类似）：
Show morehttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/... Show lesshttps://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/...
CSS ：
.toggle-link .hidden { display: none; }
更新：如乔治霍金斯所指出的，如果你正在使用bootstrap，你不需要这个css位
jQuery ：
jQuery(".toggle-link").click(function() { jQuery(this).find("span").toggleClass("hidden"); /* Add more logic here */ });
我不是说它本身更好，但对我来说它看起来更清洁。 此外，您可以通过不隐藏文本但来回更改它的颜色等等来扩展此方法。
在将这个方法拼凑在一起之前，我尝试了其中几种方法。 这是迄今为止我见过的最简单，最易读的方法：
View Filters Hide Filters Now you see me!
此链接的主要目的是切换div＃filters的可见性https://stackoverflow.com/questions/28500650/toggle-bootstrap-button-text-on-button-click/…但它利用data_target中的多个选择器来切换链接文本的两个版本的可见性。 只要确保你有一个文本为“.collapse .in”，另一个文本为“.collapse .out”。
除了简单，我喜欢这是非常可靠的。 因为标签永远不会被隐藏或操纵，所以在调试时你永远不会意外丢失视图/隐藏链接。