Menu
Posez votre question Signaler

Utiliser son code plusieurs fois pour différents attributs data? [Résolu]

-
Javascript Posez votre question Signaler
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
Afficher la suite 

2 réponses

Signaler Commenter la réponse de jordane45
Messages postés
26974
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 décembre 2019
 1918
0
Merci
Bonjour,

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

Signaler Commenter la réponse de Florian
-
On m'a dit que c'était une meilleure pratique d'utiliser data-attributes.
Commenter la réponse de jordane45
Signaler Commenter la réponse de Florian
0
Merci
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);
Commenter la réponse de Florian
Répondre Posez votre question