Discussion :

[ouranos88]

Bonjour, j'ai un système de like sur un site commercial que je crée
Image de mon site :
Le problème c'est que quand j'appuye pour liker un article ça les likes tous car mon code est conçu comme ça :
1. le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
      {{#table}}
      <tr >
      <td width="15%"><form action="monarticle" method="POST"><input type="text"name="data" value="{{Date}} " id="sendata"><div class="img_article"><input type="image" src="lapine.jpg" ></div></form></td>
      <td ><div class="titre_article">{{Titre}}
        <div class="heart-btn">
          <div class="content">
            <span class="heart"></span>
            <span class="text"></span>
            <span class="numb"></span>
          </div>
        </div>      
      </div><div class="prix_article">Prix: {{Prix}}€</div><div class="contain_article"><div>Nom: {{Name}}</div><div>Adresse: {{Adresse}}</div><div>Date: {{Date}}</div></div></td>   
      </tr>
      {{/table}}

2. Le CSS

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.heart-btn{
  margin-top:4%;
  margin-left:46.5%;
  margin-bottom:0px;
  position:relative;
  top: 0%;
  left: 50%;
  width:7%;
  height:1%;
  transform: translate(-50%,-50%);
 
}
.content{
  padding: 13px 16px;
  display: flex;
  border: 2px solid #eae2e1;
  border-radius: 5px;
  cursor: pointer;
  background-color:rgb(255, 255, 255);
 
 
}
.content.heart-active{
  border-color: #f9b9c4;
  background: #fbd0d8;
}
.heart{
  position: absolute;
  background: url("img.png") no-repeat;
  background-position: left;
  background-size: 2900%;
  height: 60px;
  width: 60px;
  top: 50%;
  left: 27%;
  transform: translate(-50%,-50%);
}
.text{
  font-size: 21px;
  margin-left: 10px;
  color: grey;
  font-family: 'Montserrat',sans-serif;
}
.numb:before{
  content: '12';
  font-size: 21px;
  margin-left: 0px;
  font-weight: 600;
  color: #928689;
  font-family: sans-serif;
}
.numb.heart-active:before{
  content: '13';
  color: #000;
}
.text.heart-active{
  color: #000;
}
.heart.heart-active{
  animation: animate .8s steps(28) 1;
  background-position: right;
}
@keyframes animate {
  0%{
    background-position: left;
  }
  100%{
    background-position: right;
  }
}

3. le JS

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script>
  $(document).ready(function(){
    $('.content').click(function(){
      $('.content').toggleClass("heart-active")
      $('.text').toggleClass("heart-active")
      $('.numb').toggleClass("heart-active")
      $('.heart').toggleClass("heart-active")
    });
  });

En gros mon dans mon html les likes sont tous reliés au même css, même code js, et même code html.
J'aimerais bien justement pouvoir les différencier mais je ne sais pas comment faire
(mon site est en html,css,js,nodejs,mongodb)
En gros si y a moyen, il faudrait que quand on appuie sur like, le css ne toggle que le like sur lequel j'ai appuyer mais je ne sais pas comment faire pour qu'il détecte que j’appuie sur ce like la ou pas un autre