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.
Code : Tout sélectionner<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>
Merci pour votre aide
Pat
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.
[code]
<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>
[/code]
Merci pour votre aide
Pat
FLTL_BYreeves42