Sujet Précédent Sujet Suivant

Finalisation d'un code d'appréciation par étoiles - commentaires

Résolu/Fermé
patpierres Messages postés 4 Date d'inscription samedi 19 janvier 2019 Statut Membre Dernière intervention 4 juin 2020 - Modifié le 3 juin 2020 à 22:45
patpierres Messages postés 4 Date d'inscription samedi 19 janvier 2019 Statut Membre Dernière intervention 4 juin 2020 - 4 juin 2020 à 10:50
Bonjour, J'ai bidouillé un code pour mon site. Ce sont des étoiles de satisfaction au nombre de 5 et je n'arrive pas à modifier le commentaires selon le nombre d'étoile cliqué (voir la fin du code ou j'ai tenté de faire quelque chose, mais ça ne fonctionne pas...) Ça doit être simple mais je ne maîtrise pas. 

<head>
<meta charset="UTF-8">
<title>Etoiles</title>

<style>
.show-result {
  margin: 10px;
  padding: 10px;
  color: green;
  font-size: 20px;
}

.star-rating s:hover,
.star-rating s.active {
    color: red;
}
.star-rating-rtl s:hover,
.star-rating-rtl s.active {
    color: red;
}

.star-rating s,
.star-rating-rtl s {
    color: black;
    font-size: 50px;
    cursor: default;
    text-decoration: none;
    line-height: 50px;
}
.star-rating {
    padding: 2px;
}
.star-rating-rtl {
    background: #555;
    display: inline-block;
    border: 2px solid #444;
}
.star-rating-rtl s {
    color: yellow;
}
.star-rating s:hover:before,
.star-rating s.rated:before,
.star-rating s.active:before {
    content: "\2605";
}
.star-rating s:before {
    content: "\2606";
}
.star-rating-rtl s:hover:after,
.star-rating-rtl s.rated:after,
.star-rating-rtl s.active:after {
    content: "\2605";
}

.star-rating-rtl s:after {
    content: "\2606";
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>

<div class="show-result">Faites votre choix</div>
    <script type="text/javascript">
        $(function() {
    $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
    
    // remove all active classes first, needed if user clicks multiple times
    $(this).closest('div').find('.active').removeClass('active');

    $(e.target).parentsUntil("div").addClass('active'); // all elements up from the clicked one excluding self
    $(e.target).addClass('active');  // the element user has clicked on


        var numStars = $(e.target).parentsUntil("div").length+1;
        $('.show-result').text(numStars + (numStars == 1 ? " étoile... Merci !" : " étoiles... Ça paye pas !"));
  $('.show-result').text(numStars + (numStars == 1 ? " étoile... Merci !" : " étoiles... Mouais!"));
  $('.show-result').text(numStars + (numStars == 1 ? " étoile... Merci !" : " étoiles... Ouf, on a la moyenne !"));
  $('.show-result').text(numStars + (numStars == 1 ? " étoile... Merci !" : " étoiles... Vous êtes trop bon !"));
  $('.show-result').text(numStars + (numStars == 1 ? " étoile... Merci !" : " étoiles... Merci, vous aussi vous êtes génial !"));
    });
});
    </script>


EDIT : Ajout du LANGAGE dans les balises de code pour avoir la coloration syntaxique

Merci pour votre aide
Patpierres

Configuration: Windows / Firefox 76.0

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38319 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 novembre 2024 4 706
3 juin 2020 à 22:50
Bonjour,

Et quel est le souci exactement ?

Déjà... tu as laissé la même condition 
numStars == 1
sur toutes tes lignes....

Ensuite, si tu veux mettre un texte différent en fonction du nombre d'étoiles, il faut le gérer avec du if/elseif.. ou un switch sur la variable numStars



1
Réponse 2 / 3
patpierres Messages postés 4 Date d'inscription samedi 19 janvier 2019 Statut Membre Dernière intervention 4 juin 2020
3 juin 2020 à 23:18
Merci pour cette réponse
Tu as bien analysé le soucis... Je ne suis pas le roi du code...
J'ai essayé en changeant la valeur de numStars == 1 2 3 ... Mais ça ne fonctionne pas mieux et je ne sais pas où placer if/elseif...
0
jordane45 Messages postés 38319 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 novembre 2024 4 706
Modifié le 4 juin 2020 à 08:27
Je suppose que tu ne comprends pas grand chose au code que tu colles ...
bref, ça devrait donner un truc du genre 
var numStars = $(e.target).parentsUntil("div").length+1;
var resultMsg = "";

if(numStars == 1){
  resultMsg = numStars + "  étoile... Merci ! ";
}else if(numStars==2){
   resultMsg = numStars + "  étoiles... Ouf, on a la moyenne  ! ";
}else if(numStars==3){
   resultMsg = numStars + " étoiles... Vous êtes trop bon  ! ";
}else if(numStars==4){
   resultMsg = numStars + "  étoiles... Merci, vous aussi vous êtes génial ! ";
}
$('.show-result').text(resultMsg);


A adapter à tes envies bien entendu...
0
Réponse 3 / 3
patpierres Messages postés 4 Date d'inscription samedi 19 janvier 2019 Statut Membre Dernière intervention 4 juin 2020
4 juin 2020 à 10:50
Bonjour, Voilà ce que j'appelle un "forum d'entraide"...
Un grand merci car cela fonctionne parfaitement et je vais essayer de comprendre pour m'améliorer...
Encore merci et bonne journée
0

Discussions similaires

code d'activation GTA 5 steam
ylyes59 -
David -

6 réponses
Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
Codes bateaux et avion GTA vice city Stories
matt3610 -
Diglo -

30 réponses