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

Résolu
patpierres Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -  
patpierres Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -
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:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 753
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 753
 
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   Statut Membre Dernière intervention  
 
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

sertissage des cables rj45
lekludo -
brupala -

7 réponses