Modifier le CSS uniquement sur l'élément cliqué

Version imprimable

1 pièce(s) jointe(s)

Bonjour, j'ai un système de like sur un site commercial que je crée
Image de mon site :Pièce jointe 584723
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:

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:

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:

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

23/11/2020, 12h03
Golgotha
Bonjour,

Tu as accès à l'élément qui a déclenché l’événement sur le click :
Code:

1 2 3 4 $('.content').click(function(e){ console.log(e.currentTarget); });
à partir de là tu peux solutionner ton problème au niveau du css, mais ça ne résoudra pas le problème de transmettre au serveur la bonne info pour garder en mémoire le like.

La manière la plus "simple" de faire tout ça serait d'avoir une fonction en javascript "like(id)" qui ramène une promesse , ainsi quand tu génère ton tableau tu va générer à chaque ligne ton bouton avec
un onclick="like(xxxx)" avec le bon id, dans le retour de ta promesse suivant le cas tu met à jour le css du bouton.
23/11/2020, 18h14
ouranos88

savoir si un utilisateur a like un article ou non et le stocker dans une bdd, ça je sais le faire il n'y a pas de probleme.
Le probleme que j'ai c'est que quand je clique pour like un article, (dans la bdd ça rajoute que tel utilisateur a like tel article donc c'est ok), le probleme est juste visuel enfaite car quand tu like un article , visuelement ça like tt les autres articles (mais dans la bdd ça "like" juste le bon article)

c'est bon j'ai résolu le problème de cette façon:
le code qui génère les articles (je crée des balises avec une id différente pour chaque article)

Code:

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
 {{#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>
        <div class="liked" style="display: none;">{{liked}}</div>
        <div class="heart-btn">
        <script>
          var elements = document.getElementsByClassName('liked');
          var liked="";
          var id=(elements.length-1)*4;
          for(let i=0; i<elements.length; i++) {
          liked=elements[i].textContent;
        }
          if (String(liked)=="true"){
          var lines ='<div class="content heart-active" id='+id+'>'
          lines+='<span class="heart heart-active"id='+String(id+1)+'></span>'
          lines+='<span class="text heart-active"id='+String(id+2)+'></span>'
          lines+='<span class="numb heart-active"id='+String(id+3)+'></span>'
          lines+= '</div>'
          document.write(lines)
          }
          else{
          var lines ='<div class="content" id='+id+'>'
          lines+='<span class="heart"id='+String(id+1)+'></span>'
          lines+='<span class="text"id='+String(id+2)+'></span>'
          lines+='<span class="numb"id='+String(id+3)+'></span>'
          lines+= '</div>'
          document.write(lines)
          }
        </script> 
      </div><div class="prix_article">Prix: {{Prix}}€</div><div class="contain_article"><div>{{Name}}</div><div>Adresse: {{Adresse}}</div><div>Date: {{Date}}</div></div></td>   
      </tr>
      {{/table}}

le code du onclick :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
  $(document).ready(function(){
    $('.content').click(function(e){
      var w=(e.currentTarget.id);
      var x=String(parseInt(w)+1)
      var y=String(parseInt(w)+2)
      var z=String(parseInt(w)+3)
      if (String(e.currentTarget.className)=="content"){
        document.getElementById(w).className="content heart-active"
        document.getElementById(x).className="heart heart-active"
        document.getElementById(y).className="text heart-active"
        document.getElementById(z).className="numb heart-active"
      }
      else{
        document.getElementById(w).className="content"
        document.getElementById(x).className="heart"
        document.getElementById(y).className="text"
        document.getElementById(z).className="numb"
      }
    });
  });
</script>

merci pour ton aide, le currentTarget m'a bien aidé (le css est le même)
il y a surement moyen d'optimiser le code, mais vu que je ne suis que débutant, je me contenterai de ça :)
faut plus que relier ça à ma bdd puis ce sera bon :)

Bonjour,

Citation:

il y a surement moyen d'optimiser le code, ...

je parlerais plutôt de maladresse en fait.

Lorsque l'on utilise jQuery on utilise jQuery à savoir on ne doit pas trouver de document.getElementById dans le code, c'est une question de cohérence.

Il faut tirer avantage du CSS, le C pour cascade, te permet de ne modifier que la classe du parent en permettant d'atteindre les enfants et c'est typiquement ce que tu fais ici.

En partant de ce bout de code HTML
Code:

1 2 3 4 5 <div class="content"> <span class="heart"></span> <span class="text"></span> <span class="numb"></span> </div>
l'ajout d'une classe à l'élément class="content" permet de modifier tous ces enfants.

Mais revenons au code JavaScript.

En fait il se réduit à :
Code:

1 2 3 4 5 6 7 8 $(document).ready(function() { $('.content').click(function() { // récup. l'élément cliqué $objClicked = $(this); // bascule la classe $objClicked.toggleClass("heart-active") }); });
Maintenant passons au CSS qu'il te faut légèrement modifier

Tu peux supprimer :
Code:

1 2 3 4 5 6 7 .numb.heart-active:before{ content: '13'; color: #000; } .text.heart-active{ color: #000; }
et le remplacer par :
Code:

1 2 3 4 5 6 7 .content.heart-active .numb:before { content: '13'; color: #000; } .content.heart-active .text { color: #000; }
Le résultat sera le même, on a juste ciblé différemment les éléments via les sélecteurs.