Question

点击活动我试图更新两个按钮：

按钮文字
徽章数

这是我的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>

在调用此jquery代码时，它会返回两段文字:(例如＆＃34;喜欢1＆＃34;）

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

有什么想法吗？

由于

Answer 1

你可以做的最好的事情是将喜欢/喜欢的文字换成另一个跨度并给它一个类：

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

它将简化代码：

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

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

Answer 2

没有冒犯，但我总是惊讶地看到拥有3000点声誉并且仍然无法通过jQuery选择范围的人：）

运行以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我会使用仅包含计数

的数据属性

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

然后在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
});

这将获取类似的计数，递增它，然后设置文本。将数据与内容分开是个好主意，因此您不需要稍后从内容中提取数据。

Answer 4

如果你把＆＃34;喜欢＆＃34;文字在一个单独的范围内变得更容易......

以下是一个例子：http://www.bootply.com/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');
    }
});

在引导按钮内更新徽章的文本？

4 个答案: