javascript - Updating text for a badge inside a bootstrap button? - Stack Overflow

admin管理员组

文章数量:1401208

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

1. The button text

2. The badge count

Here is my 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")

$(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

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

1. The button text

2. The badge count

Here is my 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")

$(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

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Feb 13, 2015 at 13:52 PaulPaul 11.8k3232 gold badges9292 silver badges145145 bronze badges 1

• Something like this: jsfiddle/x34c2211 ?? – Hackerman Commented Feb 13, 2015 at 14:02

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

<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

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 :)

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

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

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

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

$(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');
    }
});

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

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

本文标签： javascriptUpdating text for a badge inside a bootstrap buttonStack Overflow