Requête AJAX sur un seul bouton a la fois

Bonjour,
Alors je précise que je n'avais jamais fait de Javascript, encore moins de l'AJAX. Donc ce sont mes premiers pas.

J'ai une page présentant des cartes avec un bouton pour 'upvoter' la carte (un peu comme les messages sur ce forum). Voici à quoi ressemble le code d'une carte :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="card" id="{{ card.id }}">
   <div class="card-author">
           <a class="actor" href="{% url 'show_profile' card.vigil.user.username %}">
               <img src="{{ card.vigil.picture }}">
               {{ card.vigil.user.username }}
           </a>
           a posté le {{ card.added.date }} 
           {% if show_categories %}
               dans <a href="#" class="card-category">{{ card.category }}</a>
           {% endif %}
   </div>
   <div class="row">
       <div class="col-md-8">
           <h4 class="card-heading"><a href="{{ card.link }}">{{ card.title }}</a></h4>

           <div class="card-body">
               <p>{{ card.description|truncatechars:285 }}</p>
           </div>
       </div>

       <div class="col-md-4">
           <a href="{{ card.link }}">
               <div style="background-image:url('{{ card.image }}');" class="card-image"></div>
           </a>
       </div>
   </div>
   <div class="actions">
       <ul class="list-inline">
           <li>
               {% csrf_token %}
               <button class="btn-upvote" value="{{ card.id }}"><i class="fa fa-arrow-up"></i></button>
           </li>
           <li id="counter-{{ card.id }}">{{ card.upvotes }}</li>
       </ul>
   </div>
</div>

Ce qu'il faut en retenir, c'est que le bouton de chaque carte à comme classe class="btn-upvote" et comme valeur value="{{ card.id }}". On a également un compteur d'upvote <li id="counter-{{ card.id }}">{{ card.upvotes }}</li> avec un id unique pour chaque carte.

Ce que je souhaite, c'est que quand l'utilisateur clique sur le bouton, card.upvotes s'incrémente de un. Voici ce que j'ai donc au bas de ma page :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script>
    $(document).ready(function() {
        $(".btn-upvote").click(function(event){
            event.preventDefault();
            console.log('Bouton cliqué!');
            console.log($('.btn-upvote').val());
            upvote_card();
        }); 
    });
</script>

Pas la peine d'aller plus loin, le problème se manifeste dès ici. En effet, quelque soit le bouton sur le quel je vais cliquer, la console m'affichera toujours le dernier card.id (la carte qui est tout en haut de la page enfaite). Par exemple si la plus haute est 9 et que je clique sur la 6, console.log($('.btn-upvote').val()); affichera 9…

Pourquoi ?
Merci de votre aide!

Je comprend ce que tu veux dire, mais comment l'utiliser ? Parce que event je ne le retrouve qu'a un seul endroit :

1

$(".btn-upvote").click(function(event){

Et en rajoutant .target après event, il m'affiche une erreur comme quoi il manque une parenthèse…

Merci de ton aide!

C'est parfait! Merci beaucoup !!