twitter-bootstrap 更新引导按钮内徽章的文本？

Updating text for a badge inside a bootstrap button?

提问by Paul

With a click event I'm trying to update two pieces of a button:

通过单击事件，我试图更新按钮的两个部分：

1. The button text

2. The badge count

1. 按钮文字

2. 徽章数

Here is my HTML:

这是我的 HTML：

<button class="btn btn-sm btn-default like-btn" type="button" id="10">     
  <span class="glyphicon glyphicon-thumbs-up"></span>Liked
  <span class="badge like-badge active"> 1</span>
</button>

When calling this jquery code it's returning both pieces of text: (e.g. "Liked 1")

调用此 jquery 代码时，它会返回两段文本：（例如“喜欢的 1”）

$(document).on("click", ".like-btn", function(e) {
        e.preventDefault ();

        var btnID = $(this).attr('id');
        var likeText = $(this).text();

        console.log("TEXT: " + likeText);

        if ($(this).hasClass('active')) {
            // How Do I decrement the count and change the "Liked" text to "Like" ?
        }
        else {
           // How Do I increment the count and change the "Like" text to "Liked" ?
        }
    });

Any thoughts?

有什么想法吗？

Thanks

谢谢

回答by dfsq

The best thing you can do is to wrap Like/Liked text into one more span and give it a class:

你能做的最好的事情是将 Like/Liked 文本包装成一个跨度并给它一个类：

<button class="btn btn-sm btn-default like-btn active" type="button" id="10">
    <span class="glyphicon glyphicon-thumbs-up"></span>
    <span class="text">Liked</span>
    <span class="badge like-badge">1</span>
</button>

It will simplify code:

它将简化代码：

$(document).on("click", ".like-btn", function(e) {
    e.preventDefault();

    var $label = $(this).find('.text'),
        $badge = $(this).find('.badge'),
        count = Number($badge.text()),
        active = $(this).hasClass('active');

    $label.text(active ? 'Like' : 'Liked');
    $badge.text(active ? count - 1 : count + 1);
    $(this).toggleClass('active');
});

Demo:http://plnkr.co/edit/QZmEvRJASz8w4hg2pX9E?p=preview

演示：http : //plnkr.co/edit/QZmEvRJASz8w4hg2pX9E?p=preview

回答by Jeremy Thille

No offense, but I'm always surprised to see people with 3000 points of reputation and who still can't select a span with jQuery :)

无意冒犯，但我总是惊讶地看到拥有 3000 点声望但仍然无法使用 jQuery 选择跨度的人:)

Run this below :

在下面运行：

$(document).on("click", ".like-btn", function(e) {
        e.preventDefault ();

        var $this = $(this), // caching!
            btnID = $this.attr('id'),
            likeText = $this.text(),
            $text = $this.find("span.glyphicon"),
            $counter = $this.find("span.badge"),
            count = parseInt($counter.text());
    
        if ($this.hasClass('active')) {
            $this.removeClass('active');
            $text.text("Like");
            $counter.text(count-1);
        } else {
            $this.addClass('active');
            $text.text("Liked");
            $counter.text(count+1);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-sm btn-default like-btn active" type="button" id="10">     
  <span class="glyphicon glyphicon-thumbs-up">Liked</span>
  <span class="badge like-badge active"> 1</span>
</button>

回答by J?rgen R

I would use a data attribute that contains only the count

我会使用一个只包含计数的数据属性

<button class="btn btn-sm btn-default like-btn" type="button" id="10">
    <span data-like-count="1" class="likes">1 like</span>
</button>

Then in the JS

然后在 JS

$(document).on("click", ".like-btn", function(e) {
    e.preventDefault ();
    var $likes = $(this).find('.likes');
    var like_count = $like_count.data('likes') + 1; // increment by 1
    var like_text = like_count > 1 ? ' likes': ' like';

    $likes.data('like-count', like_count);
    $likes.html(like_count + like_text);

    // Do logic to update likes on the server
});

This fetches the like count, increments it, then sets the text. It's a good idea to separate data from content, so you don't need to pull the data out of the content later.

这将获取喜欢计数，增加它，然后设置文本。将数据与内容分开是个好主意，这样您以后就不需要从内容中提取数据。

回答by ChaoticNadirs

If you put the "like" text in a separate span it becomes a little easier...

如果您将“喜欢”文本放在单独的跨度中，它会变得更容易...

Here's an example: http://www.bootply.com/7YD8bspnRB

这是一个例子：http: //www.bootply.com/7YD8bspnRB

HTML

HTML

<button class="btn btn-sm btn-default like-btn" type="button" id="10">     
  <span class="glyphicon glyphicon-thumbs-up"></span>
  <span class="btn-caption">Like</span>
  <span class="badge like-badge active">1</span>
</button>

JS

JS

$(document).on("click", ".like-btn", function(e) {
    e.preventDefault ();

    var btnCaption = $(this).find(".btn-caption")       
    var badge = $(this).find(".like-badge")
    var count = parseInt(badge.text());

    if ($(this).hasClass('active')) {
        btnCaption.text("Like");
        badge.text(count - 1);
        $(this).removeClass('active');
    }
    else {
        btnCaption.text("Liked");
        badge.text(count + 1);
        $(this).addClass('active');
    }
});