yanmai
Goto Top

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?

Content-Key: 326544

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

Ausgedruckt am: 19.03.2024 um 05:03 Uhr

Mitglied: 131381
131381 16.01.2017 um 17:40:49 Uhr
Goto Top
Mitglied: Yanmai
Yanmai 16.01.2017 um 19:24:47 Uhr
Goto Top
Vielen Dank, das funktioniert schon mal. Wie kann jetzt bsp. JavaScript erkennen, wie viele Sterne gerade ausgewählt sind?
Mitglied: 131381
131381 16.01.2017, aktualisiert am 17.01.2017 um 10:10:41 Uhr
Goto Top
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>
Mitglied: 131381
131381 19.01.2017 um 13:26:23 Uhr
Goto Top
Wenns das dann war, bitte noch ein gelöst hinten dran.
Mitglied: Yanmai
Yanmai 20.01.2017 um 22:22:51 Uhr
Goto Top
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?
Mitglied: 131381
131381 21.01.2017 um 00:09:12 Uhr
Goto Top
?? Wat kommt jetzt noch alles?
Koppschüttel
Mitglied: Yanmai
Yanmai 21.01.2017 um 00:34:31 Uhr
Goto Top
Sorry, aber das warst dann eigentlich