it-swarm.com.de

jQuery - Erhöht den Wert eines Zählers, wenn auf eine Schaltfläche geklickt wird

Ich mache ein System, bei dem ein Benutzer auf eine Schaltfläche klickt und deren Punktzahl steigt. Es gibt einen Zähler, bei dem ich den Wert der Verwendung von jQuery erhöhen möchte (damit die Seite nicht aktualisiert werden muss), wenn der Button angeklickt wird. 

Wie würde ich das angehen? 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">

$("#update").click(function() {
$("#counter")++;
}

</script>

#update ist die Schaltfläche, #counter ist der Zähler.

In PHP erhöht ++ den Wert von etwas. Was ist das jQuery-Äquivalent?

Wenn Sie auf die Schaltfläche klicken, muss außerdem eine Anforderung gesendet werden, die den Wert der Bewertung in einer MySQL-Datenbank ebenfalls aktualisiert, ohne dass die Seite aktualisiert wird. Weiß jemand, wie ich das machen würde?

Danke vielmals

AKTUALISIEREN: 

Ich habe ein paar der folgenden Methoden ausprobiert, aber nichts scheint zu funktionieren! Muss ich noch etwas ändern, damit es funktioniert? Ich habe eine Testseite dafür erstellt:

<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">

var count = 0;

$("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
}

</script>
<button id="update" type="button">Button</button>
<div id="counter">1</div>
</body>
</htlm>
31
Taimur

Sie können ++ nicht für etwas verwenden, bei dem es sich nicht um eine Variable handelt.

$('#counter').html(function(i, val) { return +val+1 });

die Methode html() von jQuery kann den HTML-Wert eines Elements abrufen und festlegen. Wenn eine Funktion übergeben wird, kann sie den HTML-Code basierend auf dem vorhandenen Wert aktualisieren. Also im Zusammenhang mit Ihrem Code:

$("#update").click(function() {
    $('#counter').html(function(i, val) { return +val+1 });
}

DEMO:http://jsfiddle.net/marcuswhybrow/zRX2D/2/

Bei der Synchronisierung Ihres Zählers auf der Seite mit dem Zählerwert in Ihrer Datenbank vertrauen Sie niemals dem Client! Sie senden ein Inkrement- oder Dekrementsignal an Ihr serverseitiges Skript und nicht einen fortlaufenden Wert, z als 10 oder 23.

Sie können jedoch eine AJAX - Anforderung an den Server senden, wenn Sie den HTML-Code Ihres Zählers ändern:

$("#update").click(function() {
    $('#counter').html(function(i, val) {
        $.ajax({
            url: '/path/to/script/',
            type: 'POST',
            data: {increment: true},
            success: function() { alert('Request has returned') }
        });
        return +val+1;
    });
}
53
Marcus Whybrow
$(document).ready(function() {
var count = 0;

  $("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
  }

});

<div id="counter"></div>
16
jpea

Es ist nur 

var counter = 0;

$("#update").click(function() {
   counter++;
});
9
Vadim

Einige der obigen Vorschläge verwenden globale Variablen. Dies ist keine gute Lösung für das Problem. Die Anzahl ist spezifisch für ein Element. Mit der Funktion data von jQuery können Sie ein Datenelement an ein Element binden:

$('#counter').data('count', 0);
$('#update').click(function(){
    $('#counter').html(function(){
        var $this = $(this),
            count = $this.data('count') + 1;

        $this.data('count', count);
        return count;
    });
});

Beachten Sie auch, dass dies die Callback-Syntax von html verwendet, um den Code flüssiger und schneller zu machen.

8
lonesomeday

Gehen Sie zur folgenden Website und probieren Sie es aus. http://www.counter12.com/

Über den obigen Link habe ich das Design ausgewählt, das ich auf meiner Website akzeptiert habe, und es hat mir ein Div gegeben, das ich in meine HTML-Seite eingefügt habe. 

Es hat wunderbar funktioniert. 

Ich beantworte nicht Ihr Problem in JQuery, sondern gebe Ihnen eine alternative Lösung für Ihr Problem. 

1
Anil

Sie versuchen "++" für ein jQuery-Element festzulegen!

Sie könnten eine js-Variable deklarieren 

var counter = 0;

und in jQuery-Code:

$("#counter").html(counter++);
0
stecb

Ich werde dies auf folgende Weise versuchen. Ich habe die count-Variable in die "onfocus" -Funktion gestellt, damit sie nicht zu einer globalen Variablen wird. Die Idee ist, einen Zähler für jedes Bild in einem tumblr-Blog zu erstellen.

$(document).ready(function() {

  $("#image1").onfocus(function() {

  var count;

    if (count == undefined || count == "" || count == 0) {
    var count = 0;
    }

    count++;
    $("#counter1").html("Image Views: " + count);
  }
});

Dann füge ich außerhalb der Skript-Tags und an der gewünschten Stelle im Body Folgendes hinzu:

<div id="counter1"></div>
0
Max West