Notation de plusieur éléments avec les étoiles
Bonjour
j'ai une liste qui s'affiche d'une manière dynamique et j'ai intégré la notation sauf que si je met le curseur sur les étoiles de la deuxième ou Nème élément de la liste c'est toujours les étoiles du premier qui change de couleur. comment je peux les différenciers
<div class="table-responsive">
<table class="table table-inbox table-lg">
<tbody data-link="row" class="rowlink">
<tr class="unread">
<td class="table-inbox-name">
<a href="#">
<div class="letter-icon-title text-default">
Numéro commande
</div>
</a>
</td>
<td class="table-inbox-message">
Date de commande
</td>
<td class="table-inbox-message">
Note
</td>
</tr>
@if (Model.Commandes != null)
{
foreach (var item in Model.Commandes)
{
<tr class="unread">
<td class="table-inbox-name">
<a href="#">
<div class="letter-icon-title text-default">
@Html.DisplayFor(modelItem => item.Id)
</div>
</a>
</td>
<td class="table-inbox-message">
@Html.DisplayFor(modelItem => item.DateCommande)
</td>
<td class="table-inbox-message">
@if (item.Rating != 0)
{
<div class="form-group">
<div onmouseout="CRateSelected()">
@for (var i = 1; i <= item.Rating; i++)
{
<span class="starGlow" id="Rate_@i" onclick="CRate(@i,item.Id)" onmouseover="CRateOver(@i)" onmouseout="CRateOut(@i)"></span>
}
@for (var i = (item.Rating + 1); i <= 5; i++)
{
<span class="starFade" id="Rate_@i" onclick="CRate(@i)" onmouseover="CRateOver(@i)" onmouseout="CRateOut(@i)"></span>
}
</div>
</div>
}
else
{
<div class="form-group">
<div class="col-md-7 ">
<div onmouseout="CRateSelected()">
<span class="starFade" id="Rate_1" onclick="CRate(1)" onmouseover="CRateOver(1)" onmouseout="CRateOut(1)"></span>
<span class="starFade" id="Rate_2" onclick="CRate(2)" onmouseover="CRateOver(2)" onmouseout="CRateOut(2)"></span>
<span class="starFade" id="Rate_3" onclick="CRate(3)" onmouseover="CRateOver(3)" onmouseout="CRateOut(3)"></span>
<span class="starFade" id="Rate_4" onclick="CRate(4)" onmouseover="CRateOver(4)" onmouseout="CRateOut(4)"></span>
<span class="starFade" id="Rate_5" onclick="CRate(5)" onmouseover="CRateOver(5)" onmouseout="CRateOut(5)"></span>
</div>
</div>
</div>
}
</td>
</tr>
}
}
et voilà le script
function CRate(r) {
$("#Rating").val(r);
for (var i = 1; i <= r; i++) {
$("#Rate_" + i).attr('class', 'starGlow');
}
// unselect remaining
//for (var i = r + 1; i <= 5; i++) {
// $("#Rate " + i).attr('class', 'starFade');
//}
}
function CRateOver(r) {
for (var i = 1; i <= r; i++) {
$("#Rate_" + i).attr('class', 'starGlow');
}
for (var s = i; s <= 5; s++) {
$("#Rate_" + s).attr('class', 'starFade');
}
}
function CRateOut(r) {
for (var i = 1; i <= r; i++) {
$("#Rate_" + i).attr('class', 'starFade');
}
}
function CRateSelected() {
var setRating = $("#Rating").val();
for (var i = 1; i <= setRating; i++) {
$("#Rate_" + i).attr('class', 'starGlow');
}
for (var s = i; s <= 5; s++) {
$("#Rate_" + s).attr('class', 'starFade');
}
}
