web-dev-qa-db-fra.com

jQuery - Augmente la valeur d'un compteur quand un bouton est cliqué

Je crée un système dans lequel un utilisateur clique sur un bouton et son score augmente. Il y a un compteur que je voudrais augmenter la valeur de l'utilisation de jQuery (pour que la page n'ait pas besoin d'être rafraîchie) lorsque le bouton est cliqué. 

Comment pourrais-je m'y prendre? 

<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 est le bouton, #counter est le compteur.

En php, ++ augmente la valeur de quelque chose. Quel est l'équivalent de jQuery?

De plus, lorsque le bouton est cliqué, il doit envoyer une demande qui met également à jour la valeur du score dans une base de données mysql, sans rafraîchissement de la page. Est-ce que quelqu'un sait comment je ferais ça?

Merci beaucoup

METTRE À JOUR: 

J'ai essayé quelques-unes des méthodes ci-dessous, mais rien ne semble fonctionner! Dois-je changer quelque chose pour que cela fonctionne? J'ai créé une page de test pour cela:

<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>
javascriptjquerybutton
31
Taimur

Vous ne pouvez pas utiliser ++ sur quelque chose qui n'est pas une variable, ce serait le plus proche que vous puissiez obtenir:

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

la méthode html() de jQuery peut obtenir et définir la valeur HTML d'un élément. Si une fonction est transmise, elle peut mettre à jour le code HTML en fonction de la valeur existante. Donc dans le contexte de votre code:

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

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

Lorsqu'il s'agit de synchroniser votre compteur sur la page, avec la valeur du compteur dans votre base de données, ne faites jamais confiance au client! Vous envoyez un signal d’incrémentation ou de décrémentation à votre script côté serveur, plutôt qu’une valeur continue telle que 10 ou 23.

Cependant, vous pouvez envoyer une demande AJAX au serveur lorsque vous modifiez le code HTML de votre compteur:

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

C'est juste 

var counter = 0;

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

Plusieurs des suggestions ci-dessus utilisent des variables globales. Ce n'est pas une bonne solution au problème. Le nombre est spécifique à un élément et vous pouvez utiliser la fonction data de jQuery pour lier un élément de données à un élément:

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

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

Notez également que ceci utilise la syntaxe de rappel de html pour rendre le code plus fluide et rapide.

8
lonesomeday

Allez sur le site ci-dessous et essayez. http://www.counter12.com/

À partir du lien ci-dessus, j'ai sélectionné le modèle que j'aimais avoir sur mon site et qui m'avait fourni une div que j'ai collée dans ma page HTML. 

Cela a très bien fonctionné. 

Je ne réponds pas à votre problème sur JQuery, mais vous propose une solution alternative à votre problème. 

1
Anil

Vous essayez de définir "++" sur un élément jQuery!

Vous pouvez déclarer une variable js 

var counter = 0;

et dans le code jQuery faire:

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

Je vais essayer ceci de la manière suivante. J'ai placé la variable count dans la fonction "onfocus" pour l'empêcher de devenir une variable globale. L'idée est de créer un compteur pour chaque image dans un blog tumblr.

$(document).ready(function() {

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

  var count;

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

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

Ensuite, en dehors des balises de script et à l'endroit souhaité dans le corps, j'ajouterai:

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