Aktualisierung der text für ein Abzeichen im bootstrap-button?

Mit einem click-Ereignis ich bin versucht, zu aktualisieren, die beiden Stücke der a-Taste:

Den text der Schaltfläche
Die Abzeichen zählen

Hier ist mein 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>

Beim Aufruf der jquery-code es ist Rückkehr die beiden Stücke von text (z.B.: "Gefallen 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" ?
        }
    });

Irgendwelche Gedanken?

Dank

So etwas wie dieses: jsfiddle.net/x34c2211 ??

InformationsquelleAutor Paul | 2015-02-13

Die beste Sache, die Sie tun können, ist zu wickeln Mag/Mochte den text in eine weitere span und geben Sie eine Klasse:

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

Wird es vereinfachen, 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

Das ist es, was mir fehlte, das einwickeln der text Gefiel, in einem eigenen span. Vielen Dank für die Hilfe!
Caching, Menschen, caching... sehen $(this) bei jeder Zeile meinen Augen weh tut...
Caching ist wichtig, aber die Schaffung jQuery-Objekt aus dem DOM-element (this) ist relativ Billig, so dass ich in der Regel nicht zwischengespeichert. Allerdings DOM-Anfragen Zwischenspeichern ist ein muss, natürlich.

InformationsquelleAutor dfsq

Nichts für ungut, aber ich bin immer wieder überrascht zu sehen, wie Menschen mit 3000 Punkte der reputation und wer immer noch nicht wählen Sie einen span mit jQuery 🙂

Ausgeführt unter :

JS:

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

HTML:

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

InformationsquelleAutor Jeremy Thille

Ich würde ein data-Attribut enthält, wird nur die Anzahl

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

Dann in der 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
});

Dieser holt die wie zählen, erhöht, dann setzt der text ein. Es ist eine gute Idee, um separate Daten von Inhalten, so dass Sie nicht brauchen, um ziehen Sie die Daten aus der content später.

InformationsquelleAutor Jørgen R

Wenn Sie den "gefällt mir" - text in einem separaten Spanne es wird ein wenig leichter...

Hier ein Beispiel: 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>

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

InformationsquelleAutor ChaoticNadirs

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.