按钮上的Togglestrap按钮文本？ [英] Toggle Bootstrap button text on button click?

问题描述

我想在每次点击按钮时切换按钮上的文字，例如从显示更多...到显示更少...。

我有一个按钮用于展开或折叠附近的块href =http://getbootstrap.com/javascript/#collapse =nofollow> Collapse 部分的Bootstrap文档，点击示例Link with href按钮，看看我的意思）。

此类Bootstrap按钮的HTML如下所示：

  < a class =btn btn-primarydata-toggle =collapsehref =＃collapseExample> 
查看更多... 
< / a> 
  

当相关块被折叠时，我想要按钮文本。 显示更多...，当它扩展我想要它。 显示更少...。

我已经看到解决方案将按钮文本分为jQuery，Javascript或CSS - 阅读HTML （按钮文本完全是按钮的其他位置），也使得更难定位。

解决方案

使用jQuery的答案很简单。只需使用一个新类 toggle-text 标记此类按钮，并使用< span> 和< span class =hidden> 以标记您要在之间切换回和转发的文本：

 < a class =btn btn-primary toggle-textdata-toggle =collapsehref =＃collapseExample> 
更多< / span>< span class =hidden>更少< / span> ... 
< / a> 
  

您可以有多少或少数< span> 标签，并且可以根据需要对它们进行排序，所有重要的是它们是否被标记为 hidden 。

现在在jQuery中你可以这样做：

  $（'。hidden'）。removeClass hidden'）。hide（）; 
 $（'。toggle-text'）。（function（）{
 $（this）.find（'span'）。 ;}）; 
}）; 
  

第一行是一个锅炉板 - jQuery和Bootstrap有一些冲突的想法。这只是翻转你标记为隐藏的所有内容使用Bootstrap类 hidden 被隐藏的jQuery，这使得更容易使用
jQuery的可见性函数。 / p>

下一位是重要的东西 - 它为所有标记了我们的新类的元素安装一个处理程序 toggle-text - 此处理程序在点击给定元素的< span> 子元素时显示其可见性。

与此jFiddle一起行动的一切 - http://jsfiddle.net/w3y421m9/1/

注意：名称 toggle-text 是完全任意的，只用于标记我们想要其切换行为的按钮。

这是我第一次写一个问题以回答它。我有兴趣看看有没有更好的答案。

对我来说，这个解决方案看起来超级简单，有很大的保持按钮文本与HTML

---

jQuery非常不错，因为它不支持必须根据每个按钮进行自定义，具体取决于要显示的文本。您可以通过混合不同文字（例如，不要切换）来获得很多灵活性。以下都是等效的：

 < span>显示更多...< / span>< span class = hidden >显示少于...< / span> 
显示< span>更多< / span>< span class = hidden>少< / span> ... 
显示< ; span class = hidden>更少< / span>< span>更多< / span> ... 
  

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 Collapse section of the Bootstrap docs, click the example "Link with href" button there to see what I mean).

The HTML for such a Bootstrap button looks like this:

<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.

解决方案

Using jQuery the answer is simple. Just mark such buttons with a new class called toggle-text and use <span> and <span class="hidden"> to mark the text you want to toggle back and forward between:

<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.

Now in jQuery you can do:

$('.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 hidden to being hidden by jQuery which makes it easier to use the jQuery visibility functions afterwards.

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.

See everything in action with this jFiddle - http://jsfiddle.net/w3y421m9/1/

Note: the name toggle-text is completely arbitrary and is just used for marking buttons for which we want this toggle behavior.

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.

---

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:

<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>...

这篇关于按钮上的Togglestrap按钮文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！