7
HTML 5 Sterne Bewertung buggt
Hallo ihr Administratoren,
BeitragVerfasst: Gestern um 21:30
Hallo Forum,
ich möchte auf meiner Website eine Funktion hinzufügen, wo jeder Client eine Bewertung dalassen kann. Diese Daten sollen in einer Datenbank gespeichert werden. Dazu habe ich schon mal diesen Code entwickelt:
<html>
<head>
<title>5 Sterne</title>
<style type="text/css">
#stars > span {
display: inline-block;
font-size: 50px;
color: #818181;
}
#stars:hover > span:before {
content: '\2605';
position: absolute;
}
#stars > span:hover ~ span:before {
content: '';
}
</style>
</head>
<body>
<div id="stars">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
</body>
</html>
Wenn ich den Code so ausführe, werden die Sterne etwas verbuggt dargestellt. Wenn man also andere Sterne auswählt, werden für kurze Zeit alle Sterne ausgewählt. Das sieht dann etwas verbuggt aus. Wie kann man dies noch optimieren?
BeitragVerfasst: Gestern um 21:30
Hallo Forum,
ich möchte auf meiner Website eine Funktion hinzufügen, wo jeder Client eine Bewertung dalassen kann. Diese Daten sollen in einer Datenbank gespeichert werden. Dazu habe ich schon mal diesen Code entwickelt:
<html>
<head>
<title>5 Sterne</title>
<style type="text/css">
#stars > span {
display: inline-block;
font-size: 50px;
color: #818181;
}
#stars:hover > span:before {
content: '\2605';
position: absolute;
}
#stars > span:hover ~ span:before {
content: '';
}
</style>
</head>
<body>
<div id="stars">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
</body>
</html>
Wenn ich den Code so ausführe, werden die Sterne etwas verbuggt dargestellt. Wenn man also andere Sterne auswählt, werden für kurze Zeit alle Sterne ausgewählt. Das sieht dann etwas verbuggt aus. Wie kann man dies noch optimieren?
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 326544
Url: https://administrator.de/contentid/326544
Printed on: April 23, 2024 at 15:04 o'clock
7 Comments
Latest comment
Vielen Dank, das funktioniert schon mal. Wie kann jetzt bsp. JavaScript erkennen, wie viele Sterne gerade ausgewählt sind?
Here you go
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stars-Demo</title>
</head>
<style type="text/css">
@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
.stars {
border: none;
float: left;
}
.stars > input { display: none; }
.stars > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.stars > label {
color: #ddd;
float: right;
}
.stars > input:checked ~ label,
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label { color: #666666; }
.stars > input:checked ~ label:hover{color: #09F}
</style>
<script type="text/javascript">
function GetRating(){
var stars = document.getElementsByName('rating');
for (i = 0;i < stars.length;i++){
if(stars[i].checked){
return stars[i].value;
}
}
return 0;
}
</script>
<body>
<fieldset id="stars" class="stars">
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="5"></label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="4"></label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="3"></label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="2"></label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="1"></label>
</fieldset>
<input type="button" id="btnGetStarValue" value="Get Rating" onClick="alert('Anzahl Sterne: ' + GetRating());" style="margin:0px 10px">
</body>
</html>
Wenns das dann war, bitte noch ein gelöst hinten dran.
Vielen Dank.
Jetzt habe ich in der Datenbank die Anzahl der Sterne und die Bewertung. Wie kann ich es jetzt programmieren, dass so viele Sterne, wie in der Datenbank gespeichert sind, angezeigt werden, ohne diese Effekte?
Jetzt habe ich in der Datenbank die Anzahl der Sterne und die Bewertung. Wie kann ich es jetzt programmieren, dass so viele Sterne, wie in der Datenbank gespeichert sind, angezeigt werden, ohne diese Effekte?
?? Wat kommt jetzt noch alles?
Koppschüttel
Koppschüttel
Sorry, aber das warst dann eigentlich
