Utiliser son code plusieurs fois pour différents attributs data?

Résolu
Florian -  
 Florian -
Bonjour,

J'ai deux fonctions qui font exactement la même chose mais pour des attributs de données différents. Je voudrais simplifier ce code en une seule fonction et m'assurer que mon code ne se répète pas. J'ai pensé à mettre mes différents attributs de données dans un tableau, puis exécuter ma fonction sur chaque élément du tableau, mais je ne sais pas vraiment comment le faire. La fonction doit calculer des moyennes. Merci d'avance pour vos réponses. Voici le code:

HTML: 
  <tr>
                <td><input type="text" value="IT"></td>
                <td><input class='tot0' type="number" value="6"></td>
                <td><input data-eleve="A" data-cours="1" class="note_m note noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="1" class="note noteE" type="number"></td>
                <td><input data-cours="1" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="Français"></td>
                <td><input class='tot0 tot2' type="number" value="6"></td>
                <td><input data-eleve="A" data-cours="2" class="note_m noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="2" class="noteE" type="number"></td>
                <td><input data-cours="2" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="Allemand"></td>
                <td><input class='tot0 tot3' type="number" value="8"></td>
                <td><input data-eleve="A" data-cours="3" class="note_m noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="3" class="note3 noteE" type="number"></td>
                <td><input data-cours="3" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="Bio"></td>
                <td><input class='tot0 tot4' type="number" value="20"></td>
                <td><input data-eleve="A" data-cours="4" class="note_m noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="4" class="note4 noteE" type="number"></td>
                <td><input data-cours="4" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="moyenne"></td>
                <td><input class="tot" type="number"></td>
                <td><input type="number" data-eleve="A" class="moyenne"></td>
                <td><input type="number" data-eleve="B" class="moyenne"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td><input class="pourcent color" type="number"></td>
                <td><input class="pourcent color" type="number"></td>
                <td></td>
            </tr>

SCRIPT / JQUERY: 
$("input.moyenne[data-eleve]").each((i, eleve) => {
                let eleveIndex = $(eleve).data("eleve");
                let total = 0;

                $("input.noteE[data-eleve='" + eleveIndex + "']").each((n, note) => {
                    total += parseFloat($(note).val());
                });

                $(eleve).val(total/$('input.note_m').length);
            });
   $("input.meCours[data-cours]").each((i, cour) => {
            let courIndex = $(cour).data("cours");
            let total = 0;

            $("input.noteE[data-cours='" + courIndex + "']").each((n, note) => {
                total += parseFloat($(note).val());
            });

            $(cour).val(total/$('input.note').length);
            console.log(total)
        });


EDIT : Déplacement du sujet dans le forum JAVASCRIPT
EDIT² : Ajout des BALISES DE CODE
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Pourquoi utiliser les data-attributes dans tes selecteurs... alors que les class semblent suffire ?

0
Florian
 
On m'a dit que c'était une meilleure pratique d'utiliser data-attributes.
0
Réponse 2 / 2
Florian
 
Voici la soution pour les personnes que ça pourrait aider:

HTML:
<tr>
<td>Cours 1</td>
<td><input data-eleve="A" data-cours="1" /></td>
<td><input data-eleve="B" data-cours="1" /></td>
<td><input data-eleve="C" data-cours="1" /></td>
<td><span data-cours="1">0</span></td>
</tr>
<tr>
<td>Cours 2</td>
<td><input data-eleve="A" data-cours="2" /></td>
<td><input data-eleve="B" data-cours="2" /></td>
<td><input data-eleve="C" data-cours="2" /></td>
<td><span data-cours="2">0</span></td>
</tr>
<tr>
<td></td>
<td><span data-eleve="A">0</span></td>
<td><span data-eleve="B">0</span></td>
<td><span data-eleve="C">0</span></td>
</tr>

SCRIPT:

function calculateValues() {
["eleve", "cours"].forEach(x => {
$("span[data-" + x + "]").each((i, eleve) => {
let ind = $(eleve).data(x);
let total = 0;

$("input[data-" + x + "='" + ind + "']").each((n, note) => {
total += parseFloat($(note).val());
});

$(eleve).html(total);
});
})
}

$("input").change(calculateValues);
0