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

A voir également:

Content: "\2605";
Code asci - Guide
Code puk bloqué - Guide
Code telephone oublié - Guide
Code blocks free - Télécharger - Langages
Comment créer un qr code - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
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

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...

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
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...

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

Discussions similaires

liste de noms par ordre alphabétique

Code de renvoi d'appel : Ooredo, Mobilis...

Acces à snapchat temporairement désactivé

Discussions similaires

Newsletters