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?

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 326544

Url: https://administrator.de/contentid/326544

Ausgedruckt am: 24.11.2024 um 22:11 Uhr

7 Kommentare

Neuester Kommentar

https://codepen.io/jamesbarnett/pen/vlpkh

Gruß mik

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?