Discussion :

[AmineDm]

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');
}
}

[Dokho1000]

Salut,

c'est plutot un problème JS que ASP.NET.
Tu devrais préciser dans tes étoiles l'id de ta commande en plus de l'index afin de le rendre vraiment unique. (Sinon tu récupère le premier élément qui correspond et qui sera forcément toujours ta première commande...)
Ensuite dans tes événements tu pourrais passer directement l'objet "span" avec le mot clé "this".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="starGlow" id="Rate_@i_@item.Id" onclick="CRate(this)" onmouseover="CRateOver(this)" onmouseout="CRateOut(this)"></span>

Maintenant tu es certain d'être sur la bonne balise, tu n'as plus qu'a faire ton traitement...

[AmineDm]

Merci infiniment

[Dokho1000]

Merci infiniment

Tu peux marqué la discussion comme résolu

A+